如何單擊鏈接（菜單）以打開選項卡？

Question

我試圖單擊菜單中的鏈接以打開tabs（div），但找不到解決方案。

<div>   
  <ul>
    <li><a href="#tabs1" class="select">tabs1</a></li>
    <li><a href="#tabs2">tabs2</a></li>   
  </ul> 
</div>

<div id="tabs1" class="active"></div>
<div id="tabs2"></div>

當我打開表單1.html（沒有選項卡）並單擊菜單以在2.html中打開tabs2時，它不起作用。 有任何想法嗎？ 謝謝 ！

更新 -這是我的腳本。

$("a#tabs-1").click(function () {
    $("a#tabs-2").removeClass("active");
    $(this).addClass("active");
});
$("a#tabs-2").click(function () {
    $("a#tabs-1").removeClass("active");
    $(this).addClass("active");
    return false;
});

Answer 1

這是我可以為您提供的最簡單的CSS代碼。 這是小提琴 。

 $(".tabs1").click(function () { $("#tabs2").removeClass("active"); $("#tabs1").addClass("active"); }); $(".tabs2").click(function () { $("#tabs1").removeClass("active"); $("#tabs2").addClass("active"); }); 

 #tabs1, #tabs2 { display: none; } #tabs1.active, #tabs2.active { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <ul> <li><a href="#tabs1" class="select tabs1">tabs1</a></li> <li><a href="#tabs2" class="tabs2">tabs2</a></li> </ul> </div> <div id="tabs1" class="active">tab1</div> <div id="tabs2">tab2</div> 

希望能有所幫助。

Answer 2

你可以做類似的事情

 $('.tabs li').click(function(e) { var $this = $(this), $tab = $($this.find('a').attr('href')); $this.addClass('select'); $this.siblings().removeClass('select'); $tab.show().addClass('active'); $('.tab').not($tab).hide().removeClass('active'); e.preventDefault(); }).filter(':has(.select)').click(); 

 .tab { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div> <ul class="tabs"> <li><a href="#tabs1" class="select">tabs1</a></li> <li><a href="#tabs2">tabs2</a></li> </ul> </div> <div id="tabs1" class="tab active">tabs1</div> <div id="tabs2" class="tab">tabs2</div> 

Answer 3

我向div添加了一個類tabsDiv ，以使其順暢。

<div>   
  <ul>
    <li><a href="#tabs1" class="select">tabs1</a></li>
    <li><a href="#tabs2">tabs2</a></li>   
  </ul> 
</div>

<div id="tabs1" class="tabsDiv active"></div>
<div id="tabs2" class="tabsDiv"></div>

當您單擊a剛剛添加的class select該特定的a並將其從所有同級中刪除。 然后獲取被點擊的a href ，並使具有該href id的div active 。

不要忘記添加e.stopProagation()停止點擊的默認行為a標簽。

$(document).ready(function(){
    $("div ul li a").click(function(e){
        e.stopPropagation(); 
        $(this).addClass("select").siblings("a").removeClass("select");
        var _toOpen = this.href;
        $(".tabsDiv").removeClass("active");
        $(_toOpen).addClass("active");
    });

});