2015-04-06 88 views
1

我有一個標題導航菜單,我需要鏈接到jQuery選項卡 - 因此鏈接必須在同一頁面上打開一個選項卡並鏈接到選項卡並從另一頁打開它們。我從另一頁面開始工作,但不知道如何在同一頁面上打開具有外部鏈接的特定選項卡,而不包括每個子頁面的單獨標題,該標題使用導航欄中鏈接的標籤。如何將導航菜單鏈接到jQuery選項卡

這是一個Jsfiddle,但它有問題,因爲導航中的鏈接導致外部文件。要點是,該導航都應該從外部網頁,然後在同一頁上也只是打開一個標籤

http://jsfiddle.net/vbonoL5b/

這是菜單的一部分(其2級UL菜單)

工作
<div id="nav"> 
    <ul><li><a href="index.php?lang=<?php echo $lang ?>">Home</a> 
        <ul> 
         <li><a href="index.php?lang=<?php echo $lang ?>#tabs-1" class="tabLink">Concept</a></li> 
         <li><a href="index.php?lang=<?php echo $lang ?>#tabs-2" class="tabLink">Benefits</a></li> 
        </ul> 
    </li></ul> 
</div> 

的標籤是非常簡單的jQuery標籤:

<div id="icon-tabs"> 
       <ul> 
       <li><a href="#tabs-1" id="item1" ><div class="icon-tab"><h4>Concept</h4><img src="img/concept.png"></img></div></a></li> 
       <li><a href="#tabs-2" id="item2" ><div class="icon-tab"><h4>More</h4><img src="img/benefits.png"></img></div> </a></li> 
       </ul> 
     <div id="tabs-1"> 
      .... 
     </div> 
</div> 

我嘗試過的一些事情,但我從來沒有設法得到的鏈接在同一頁上打開:

$(function() { 
//Load tabs 
$("#icon-tabs").tabs(); 

//Check url and open appropriate tab (for when you come from external site) 
if(document.location.hash!='') { 
    //get the index from URL hash 
    tabSelect = document.location.hash.substr(1,document.location.hash.length); 
    $("#icon-tabs").tabs('select',tabSelect-1); 
} 

//Use the nav to open local tabs?? I tried .onclic events based on ID and class of links in menu, but never got it working. 
// For example: 
$('.tabLink').click(function(e) { 
    if(document.location.hash!='') { 
    (e).preventDefault(); 
    //get the index from URL hash 
    tabSelect = document.location.hash.substr(1,document.location.hash.length); 
    $("#icon-tabs").tabs('select',tabSelect-1); 
    } 
    }); 
}); 

我不知道我在做什麼錯。任何幫助或建議表示讚賞!

+0

你能提供樣本鏈接嗎? – 2015-04-06 12:02:34

+0

當然,抱歉給我分鐘我只有本地 – CluelessStudent 2015-04-06 12:06:05

+0

嗯,我無法得到它所有的工作,因爲#nav菜單使用鏈接中的外部文件:http://jsfiddle.net/vbonoL5b/ – CluelessStudent 2015-04-06 12:36:14

回答

0

使用以下代碼。 index函數直接使用「ID」屬性的元素索引

$(function() { 
//Load tabs 
    $("#icon-tabs").tabs(); 

    //Check url and open appropriate tab (for when you come from external site) 
    if(document.location.hash!='') { 
    //get the index from URL hash 

    tabSelect = $('#icon-tabs div').index($(document.location.hash)); 
    $("#icon-tabs").tabs('select',tabSelect);  } 

    //Use the nav to open local tabs?? I tried .onclic events based on ID and class of links in menu, but never got it working. 
    // For example: 
    $('.tabLink').click(function(e) { 
    if(document.location.hash!='') { 
     e.preventDefault(); 
    tabSelect = $('#icon-tabs div').index($(document.location.hash)); 
    $("#icon-tabs").tabs('select',tabSelect); 
    } 
    }); 

}); 
+0

我試過了,但似乎.click函數從來沒有註冊 - 網址更改,但代碼似乎並沒有執行 – CluelessStudent 2015-04-06 12:13:51

+0

你在URL中傳遞什麼? 。標籤的ID? – 2015-04-06 12:14:23

+0

這是問題鏈接http://stackoverflow.com/questions/29466122/jquery-ui-tabs-anchor-to-internal-links/29466602#29466602 – 2015-04-06 12:32:36

相關問題