第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 jQuery 從多個元素添加和刪除類

使用 jQuery 從多個元素添加和刪除類

犯罪嫌疑人X 2023-11-02 22:39:24
我有一個選項卡導航位于內容塊的上方和下方。我希望使用 class 突出顯示活動選項卡active-tab。默認情況下,第一個選項卡是活動選項卡。單擊其他選項卡之一時,我希望該選項卡突出顯示為活動選項卡。我的 HTML 結構如下所示<ul class="tab-navigation">    <li class="tab active-tab" rel="tab1">First tab</li>    <li class="tab" rel="tab2">Second tab</li>    <li class="tab" rel="tab3">Third tab</li></ul><div>    <div class="tab_container">        <div id="tab1" class="tab_content">Some Content</div>        <div id="tab2" class="tab_content">Some Content</div>        <div id="tab3" class="tab_content">Some Content</div>    </div></div><ul class="tab-navigation">    <li class="tab active-tab" rel="tab1">First tab</li>    <li class="tab" rel="tab2">Second tab</li>    <li class="tab" rel="tab3">Third tab</li></ul>jQuery 代碼如下所示:$(".tab_content").hide();$(".tab_content:first").show();$("ul.tab-navigation li").click(function() {        $(".tab_content").hide();    var activeTab = $(this).attr("rel");     $("#"+activeTab).fadeIn();              $("ul.tab-navigation li").removeClass("active-tab");    $(this).addClass("active-tab");    });上面的 jQuery 代碼可以工作,但它只添加和刪除active-tab所使用的選項卡導航的類。如果我使用內容上方的導航,它只會更改內容上方選項卡的類,而不會更改下方選項卡的類。但是,我希望它能夠更新兩者的課程。
查看完整描述

1 回答

?
qq_笑_17

TA貢獻1818條經驗 獲得超7個贊

當您獲得rel價值時,您可以使用它作為選擇器將活動類添加到所需的 div 中,即:$(".tab-navigation li[rel="+activeTab+"]")。


演示代碼:


$(".tab_content").hide();

$(".tab_content:first").show();


$("ul.tab-navigation li").click(function() {

  $(".tab_content").hide();

  var activeTab = $(this).attr("rel");

  $("#" + activeTab).fadeIn();

  $("ul.tab-navigation li").removeClass("active-tab");

  //add class where rel matches

  $(".tab-navigation li[rel=" + activeTab + "]").addClass("active-tab");


});

.active-tab {

  color: red

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="tab-navigation">

  <li class="tab active-tab" rel="tab1">First tab</li>

  <li class="tab" rel="tab2">Second tab</li>

  <li class="tab" rel="tab3">Third tab</li>

</ul>

<div>

  <div class="tab_container">

    <div id="tab1" class="tab_content">Some Content1</div>

    <div id="tab2" class="tab_content">Some Content2</div>

    <div id="tab3" class="tab_content">Some Content3</div>

  </div>

</div>

<ul class="tab-navigation">

  <li class="tab active-tab" rel="tab1">First tab</li>

  <li class="tab" rel="tab2">Second tab</li>

  <li class="tab" rel="tab3">Third tab</li>

</ul>


查看完整回答
反對 回復 2023-11-02
  • 1 回答
  • 0 關注
  • 126 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號