3

このサイトで複数の回答を調べましたが、何らかの理由で問題を解決できませんでした ( JQuery でアンカー タグを使用して他のページから特定のタブを選択する方法..? )。これはローカル コンピューターでのみテストしているため、影響があるかどうかはわかりません。

現在のページだけでなく、他のページからも各タブにリンクしたい。現在、各タブをクリックすることができ、完全に機能し、サイトの URL が変更されます (#tab1、#tab2 など)。

ただし、たとえば、タブ 2 が表示されているときにタブ 1 のリンク (実際のタブではなく、タブ 1 を対象とするページ上のリンク) をクリックすると、何も起こりませんが、URL は /site.html#tab1 に変更されます。 . ただし、タブ 1 が表示されているときにタブ 1 のリンクをクリックすると、タブ 1 に移動します。タブが非表示になっているため、何か問題が発生しています。リンクは、現在表示されているタブに対してのみ機能します。少なくともページ内で機能させることができれば、ページ外のリンクからも機能させることができると思います。

基本的に、誰かにリンクを送信してそのタブに移動できるようにしたいと考え/site.html#tab3ています。

私のコード:

    $(document).ready(function() {

      //Default Action
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return;
    });
});

と：

$(document).ready(function () {

    var tabId = window.location.hash; // will look something like "#h-02"
    $(tabId).click(); // after you've bound your click listener
});

そしてタブ：

 <ul class="tabs">
        <li><a href="#tab1">Ex 1</a></li>
        <li><a href="#tab2">Ex 2</a></li>
        <li><a href="#tab3">Ex 3</a></li>
        <li><a href="#tab4">Ex 4</a></li>

タブのコンテンツの例と、ページ上のタブへのリンク:

//tab content
<div class="tab_container">
        <div id="tab1" class="tab_content">
          <h2>Ex 1</h2>

//Link to Tab 1 from right menu
<ul><li>
<a href="#tab1">Click here to go to tab 1</a></li></ul>

ありがとうございました！！

4

2 に答える 2

1

これを参照してください：

ページの読み込み時 (dom の準備ができたとき) にこれを行います。

var tabId = location.hash; // will look something like "#h-02"

ハッシュをチェックする

 if(tabId){
   $(tabId).show(); // this will fired only when url get hash
   $(tabId).siblings().hide(); // this will show only targeted tab 
                               // others get hidden
 }

このようなURLを取得したときにこれが何をするかsite.html#tab1

variable tabId価値があります#tab1

次に、コード ブロックが対象のタブを表示するかどうかを条件付けします

于 2012-11-26T08:26:09.130 に答える
1

タブ リンクに共通クラスを追加します。リンクをクリックすると、対応するタブのクリックをトリガーできます。

HTML

<a href="#tab1" class="tab-link">Click here to go to tab 1</a>

JS

$('.tab-link').click(function(){
    $('ul.tabs li a[href="'+this.href+'"]').parent().click();

});
于 2012-11-26T08:02:08.840 に答える