Adding and removing content using javascript

Question

Adding and removing content using javascript

Navigation

#1 by (0 votes)

2

javascript html

asked by anonymous 14.06.2016 / 19:00

1 answer

Objective C - How do I direct user to appleStore to update their APP Send application data with screen of cell blocked to the server using voice command [closed]

score 0 · Answer 1

See if this helps you:

$('#choose-list li').click(function() {
  var selectedList = $(this).data('list');
  $('[id^="list"]').hide();
  $('#list-' + selectedList).show();
});

ul li {
  display: inline;  
}
div > span {
  display: block;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ulid="choose-list">
  <li data-list="1"><button>1</button></li>
  <li data-list="2"><button>2</button></li>
  <li data-list="3"><button>3</button></li>
</ul>

<div id="list-1">
  <span>Filme 1</span>
  <span>Filme 2</span>
  <span>Filme 3</span>
</div>

<div id="list-2" style="display: none">
  <span>Filme 4</span>
  <span>Filme 5</span>
  <span>Filme 6</span>
</div>

<div id="list-3" style="display: none">
  <span>Filme 7</span>
  <span>Filme 8</span>
  <span>Filme 9</span>
</div>

What you will need to do is the following:

Add id choose-list to its ul that contains the tabs.
Then in your li you add data-list="1" , changing "1" by the correct tab number.
Each list you place within a div with id list-1 , changing 1 to the corresponding number in the list.
All the lists that will start hidden will apply style="display: none"

That way you get good tab management.