2017-04-01 8 views
1

開いているタブへのリンクを別のページに作成したいとします。私はこのスクリプトを使用開いているタブへのリンク

// This are internal links 
<ul class="tabs"> 
    <li class="tab-link current" data-tab="tab-1">Tab 1</li> 
    <li class="tab-link" data-tab="tab-2">Tab 2</li> 
    <li class="tab-link" data-tab="tab-3">Tab 3</li> 
    <li class="tab-link" data-tab="tab-4">Tab 4</li> 
</ul> 

<div id="tab-1" class="tab-content current"><p>some content</p></div> 
<div id="tab-2" class="tab-content"><p>some content</p></div> 
<div id="tab-3" class="tab-content"><p>some content</p></div> 
<div id="tab-4" class="tab-content"><p>some content</p></div> 

:ここ は、タブの上にある私のhtmlだ

$(document).ready(function(){ 
    $('ul.tabs li').click(function(){ 
    var tab_id = $(this).attr('data-tab'); 

    $('ul.tabs li').removeClass('current'); 
    $('.tab-content').removeClass('current'); 

    $(this).addClass('current'); 
    $("#"+tab_id).addClass('current'); 
    }) 
}) 

は、今私は、外部のページにこのリンクを持って、私はタブでページにリダイレクトしたいとタブ2の内容を表示:

<a href="tabpage.html#tab-2>Some link</a> 

これは機能していない、誰でも助けてくれますか?たぶん、a要素のonclick()で?

答えて

2

は、ページのロード時にURLにハッシュを読み、<li>

何かのように対応する上でクリックを誘発する:あなたの答えのための

$(document).ready(function() { 
    // your existing tabs click listener 
    $('ul.tabs li').click(function() { .... }) 
    // get hash from url 
    var hash = location.hash; 
    // check if tab matching hash exists 
    if (hash && $(hash).length) { 
    // now trigger click on appropriate tab 
    $('.tab-link[data-tab="' + hash.slice(1) + '"]').click();   
    } 

}) 
+0

おかげで、しかし..あなたは何に少しより多くの情報を与えることができます私は正確に行う必要がありますか?私はまだ学んでいます:) – CliffVandyck

+0

答えに示されているものと同じです。あなたの後に私の新しいコードを追加してください – charlietfl

+0

ありがとう、これは私にとって完璧に機能しました! – CliffVandyck

関連する問題