Question

我正在尝试学习jQuery，自学自学，我需要了解如何将这些类似的功能结合起来并将它们结合起来，谢谢。

li＃选项卡编号和#tabcontent编号在单击时对应，因此必须有一种简单的方法来实现相同的功能

$('#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');
});

这是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>

以下是正在运行的showtab脚本

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;
}

Answer 1

如果索引总是按顺序排列，你可以查看li的索引。

＆＃13;

$("#replacetabs").on("click","li", function () {
    var index = $(this).index();
    console.log(index);
    $('#tabcontent' + index).toggleClass("active").siblings().removeClass("active");
});

＆＃13;

.content { display : none; }
.content.active { display : block; }

＆＃13;

<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>

＆＃13;

Answer 2

试试这个：

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

结合所有应用相同css样式的类似函数

2 个答案: