CODEWITHSUNDEEP
jquery
MShack
MShack

Reputation: 652

Combining similar functions that all apply the same css style

I'm trying to learn jQuery , self teaching myself and I need to understand how i can take these similar functions and combine them to be shortened , thanks.

The li#tab number and the #tabcontent number correspond when clicked, so there must be a simple way to achieve the same thing

$('#replacetabs li#tab0').on('click',function(){
  $('#tabcontent0').css('display','block');
});
$('#replacetabs li#tab1').on('click',function(){
  $('#tabcontent1').css('display','block');
});
$('#replacetabs li#tab2').on('click',function(){
  $('#tabcontent2').css('display','block');
});
$('#replacetabs li#tab3').on('click',function(){
  $('#tabcontent3').css('display','block');
});
$('#replacetabs li#tab4').on('click',function(){
  $('#tabcontent4').css('display','block');
});
$('#replacetabs li#tab5').on('click',function(){
  $('#tabcontent5').css('display','block');
});
$('#replacetabs li#tab6').on('click',function(){
  $('#tabcontent6').css('display','block');
});
$('#replacetabs li#tab7').on('click',function(){
  $('#tabcontent7').css('display','block');
});
$('#replacetabs li#tab8').on('click',function(){
  $('#tabcontent8').css('display','block');
});
$('#replacetabs li#tab9').on('click',function(){
  $('#tabcontent9').css('display','block');
});
$('#replacetabs li#tab10').on('click',function(){
  $('#tabcontent10').css('display','block');
});
$('#replacetabs li#tab11').on('click',function(){
  $('#tabcontent11').css('display','block');
});

Here is the HTML

    <div id="replacehometabs">
     <ul id="replacetabs">
      <li class="" id="tab0" title="" onclick="javascript:show_tab('0');"><a>Home</a></li>
      <li class="" id="tab1" title="" onclick="javascript:show_tab('1');"><a>Management</a></li>
      <li class="" id="tab2" title="" onclick="javascript:show_tab('2');"><a>Gameday</a></li>
      <li class="" id="tab3" title="" onclick="javascript:show_tab('3');"><a>Pools</a></li>
      <li class="" id="tab4" title="" onclick="javascript:show_tab('4');"><a>Standings</a></li>
      <li class="" id="tab5" title="" onclick="javascript:show_tab('5');"><a>Rosters</a></li>
      <li class="" id="tab6" title="" onclick="javascript:show_tab('6');"><a>Reports</a></li>
      <li class="" id="tab7" title="" onclick="javascript:show_tab('7');"><a>Calendar</a></li>
      <li class="" id="tab8" title="" onclick="javascript:show_tab('8');"><a>Playoffs</a></li>
      <li class="" id="tab9" title="" onclick="javascript:show_tab('9');"><a>Draft</a></li>
      <li class="" id="tab10" title="" onclick="javascript:show_tab('10');"><a>Forums</a></li>
      <li class="" id="tab11" title="" onclick="javascript:show_tab('11');"><a>History</a></li>
     </ul>
    </div>

Here is the showtab script that is running

function show_tab (tab_id) {

   var done = false;
   var counter = 0;
   while (! done) {
      var this_tab_content = document.getElementById("tabcontent" + counter);
      var this_tab = document.getElementById("tab" + counter);
      if (! this_tab_content) {
         done = true;
      } else {
         if (counter == tab_id) {
            this_tab_content.style.display = '';
            this_tab.className = "currenttab";
         } else {
            this_tab_content.style.display = 'none';
            this_tab.className = "";
         }
      }
      counter++;
   }
   location.hash = tab_id;
}

Upvotes: 0

Views: 38

Answers (2)

epascarello
epascarello

Reputation: 207501

If the index is always going to be in order, you can just look at the li's index.

$("#replacetabs").on("click","li", function () {
    var index = $(this).index();
    console.log(index);
    $('#tabcontent' + index).toggleClass("active").siblings().removeClass("active");
});
.content { display : none; }
.content.active { display : block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="replacehometabs">
     <ul id="replacetabs">
      <li class="" id="tab0" title="" ><a>Home</a></li>
      <li class="" id="tab1" title="" ><a>Management</a></li>
      <li class="" id="tab2" title="" ><a>Gameday</a></li>
     </ul>
</div>
<div class="content" id="tabcontent0">HOME</div>
<div class="content" id="tabcontent1">MANAGEMENT</div>
<div class="content" id="tabcontent2">GAMEDAY</div>

Upvotes: 1

cos nik
cos nik

Reputation: 386

Try This:

for (i=0; i<11; i++){
$('#replacetabs li#tab'+i'').on('click',function(){
  $('#tabcontent'+i'').css('display','block');
});
}

Upvotes: 0

Related Questions