在鏈接單擊時強制切換選項卡

Question

我想要實現的是我在選項卡容器之外有一個錨鏈接。 我在 TAB2 中添加了另一個具有相同 ID 的鏈接。 因此，當用戶單擊該鏈接時，它應該切換到 TAB 2。現在它什么也沒有發生。 這里的代碼如下。

 $(".tab_content").hide(); $(".tab_content:first").show(); $("ul.tabs li").click(function () { $(".tab_content").hide(); var activeTab = $(this).attr("rel"); $("#" + activeTab).fadeIn(); $("ul.tabs li").removeClass("active"); $(this).addClass("active"); $(".tab-drawer-heading").removeClass("d_active"); $(".tab-drawer-heading[rel^='" + activeTab + "']").addClass("d_active"); });

 #topic-tabs { padding: 60px 0; } #topic-tabs.wrapper.tabs-sec ul.tabs { margin: 0; padding: 0; list-style: none; height: auto; width: 100%; text-align: center; display: flex; align-items: center; justify-content: center; margin-bottom: 0px; padding-bottom: 20px; } #topic-tabs.wrapper.tabs-sec ul.tabs li { cursor: pointer; /* padding: 15px 15px; */ background-color: #e9e9e9; color: #333; border: 1px solid #e9e9e9; overflow: hidden; position: relative; min-width: 200px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 5px; margin: 0 4px; font-size: 14px; font-weight: 500; } #topic-tabs.wrapper.tabs-sec ul.tabs li span { color: #fff; background: #e2251d; border-radius: 50%; height: 20px; width: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; margin-left: 5px; } #topic-tabs.wrapper.tabs-sec ul.tabs li:hover { background-color: #f7941d; color: #fff; border-color: #f7941d; } #topic-tabs.wrapper.tabs-sec ul.tabs li:hover span { color: #fff; } #topic-tabs.wrapper.tabs-sec ul.tabs li.active { background-color: #fff; color: #333; border-color: #f7941d; } #topic-tabs.wrapper.tabs-sec.tab-container { border: 1px solid #e9e9e9; clear: both; width: 100%; background: #fff; overflow: auto; border-radius: 5px; } #topic-tabs.wrapper.tabs-sec.tab-container.tab_content { padding: 30px; display: none; }

 <br><br> <div> <a href="#topic1">Click for Topic 1</a> </div> <section id="topic-tabs"> <div class="wrapper"> <div class="tabs-sec"> <ul class="tabs"> <li class="active" rel="tab1">TAB 1</li> <li rel="tab2">TAB 2</li> </ul> <div class="tab-container"> <div id="tab1" class="tab_content"> <div class="agenda-sec"> <h5>Some text</h5> </div> </div> <div id="tab2" class="tab_content"> <div class="agenda-sec"> <a href="#" id="topic1">Topic 1</a> </div> </div> </div> </div> </div> </section> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

我嘗試了很多方法，但都不起作用。 有人可以幫忙嗎？

Answer 1

你可以試試...

 $(".tab_content").hide(); $(".tab_content:first").show(); $("#outsideTabe").click(function () { var activeTab = $(this).attr("rel"); showHideContent(activeTab); }); $("ul.tabs li").click(function () { var activeTab = $(this).attr("rel"); showHideContent(activeTab); }); function showHideContent(activeTab){ var activeTab = activeTab; $(".tab_content").hide(); $("#" + activeTab).fadeIn(); $("ul.tabs li").removeClass("active"); $(this).addClass("active"); $(".tab-drawer-heading").removeClass("d_active"); $(".tab-drawer-heading[rel^='" + activeTab + "']").addClass("d_active"); }

 #topic-tabs { padding: 60px 0; } #topic-tabs.wrapper.tabs-sec ul.tabs { margin: 0; padding: 0; list-style: none; height: auto; width: 100%; text-align: center; display: flex; align-items: center; justify-content: center; margin-bottom: 0px; padding-bottom: 20px; } #topic-tabs.wrapper.tabs-sec ul.tabs li { cursor: pointer; /* padding: 15px 15px; */ background-color: #e9e9e9; color: #333; border: 1px solid #e9e9e9; overflow: hidden; position: relative; min-width: 200px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 5px; margin: 0 4px; font-size: 14px; font-weight: 500; } #topic-tabs.wrapper.tabs-sec ul.tabs li span { color: #fff; background: #e2251d; border-radius: 50%; height: 20px; width: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; margin-left: 5px; } #topic-tabs.wrapper.tabs-sec ul.tabs li:hover { background-color: #f7941d; color: #fff; border-color: #f7941d; } #topic-tabs.wrapper.tabs-sec ul.tabs li:hover span { color: #fff; } #topic-tabs.wrapper.tabs-sec ul.tabs li.active { background-color: #fff; color: #333; border-color: #f7941d; } #topic-tabs.wrapper.tabs-sec.tab-container { border: 1px solid #e9e9e9; clear: both; width: 100%; background: #fff; overflow: auto; border-radius: 5px; } #topic-tabs.wrapper.tabs-sec.tab-container.tab_content { padding: 30px; display: none; }

 <br> <div> <a href="#tab2" rel="tab2" id="outsideTabe">Click for Topic 1</a> </div> <section id="topic-tabs"> <div class="wrapper"> <div class="tabs-sec"> <ul class="tabs"> <li class="active" rel="tab1">TAB 1</li> <li rel="tab2">TAB 2</li> </ul> <div class="tab-container"> <div id="tab1" class="tab_content"> <div class="agenda-sec"> <h5>Some text</h5> </div> </div> <div id="tab2" class="tab_content"> <div class="agenda-sec"> <a href="#" id="topic1">Topic 1</a> </div> </div> </div> </div> </div> </section> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Answer 2

這對我有用，

<div> <a href="#topic1" class="min-link">Click for Topic 1</a> </div>

$(".min-link").click(function(){

 $(".tab_content").hide();
    var activeTab = $(this).attr("rel");
    $("#" + activeTab).fadeIn();

    $("ul.tabs li").removeClass("active");

$(".tabs li").each(function (index) {
if($(this).attr("rel")==activeTab)
{
 $(this).addClass("active");
}
});

    $(".tab-drawer-heading").removeClass("d_active");
    $(".tab-drawer-heading[rel^='" + activeTab + "']").addClass("d_active");

});