如何鏈接節選項卡

大家好，我需要用我使用的部分容器自動帶deep_linking部分幫助;真我也有數據蛞蝓到每個標籤，如何鏈接節選項卡

我有3個標籤與他們的圖像所以基本上我想有一個直接鏈接訪問每個單獨的標籤在主頁上有鏈接。我嘗試添加location.hash腳本，也嘗試了.on click和.trigger，並且它們都不起作用。

非常感謝。

<body> 
<div class="section-container auto" data-section="" data-option="deep_linking;true;"> 
<section class="active"> 
<p class="title" data-section-title=""><a href="#tab1"></a><span>tab1</span></p> 
<div class="content" data-slug="loans" data-section-content=""> 
<h1>tab1</h1></div> 

<p class="title" data-section-title=""><a href="#tab2"><span>tab2</span></a></p> 
<div class="content" data-slug="tab2" data-section-content=""> 
<h1>tab2</h1> 
</div> 
</body>

來源

2014-03-06 Caloyz

請提供您的代碼。 –

感謝您的回覆JF它，我包括代碼 – Caloyz

我沒有看到您的腳本：/你能提供嗎？ –

伊夫做過球員，我只是增加了一個腳本：

<script> 
$(document).ready(function(){ 
     $('section').removeClass('active'); 
    var hash = window.location.hash; 
    if (hash !== '') 
    { 
      $('section'+hash).addClass('active'); 
    }   
});

它檢查url中的哈希然後設置部分類=「活動」。感謝球員的所有答覆。

來源

2014-03-12 02:29:26 Caloyz

你可以使用jQuery UI庫，使標籤和麪板

試試這個代碼，以弄清楚什麼是jQuery用戶界面標籤：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>tabs demo</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 

<div id="tabs"> 
    <ul> 
    <li><a href="#fragment-1"><span>One</span></a></li> 
    <li><a href="#fragment-2"><span>Two</span></a></li> 
    <li><a href="#fragment-3"><span>Three</span></a></li> 
    </ul> 
    <div id="fragment-1"> 
    <p>First tab is active by default:</p> 
    <pre><code>$("#tabs").tabs(); </code></pre> 
    </div> 
    <div id="fragment-2"> 

    </div> 
    <div id="fragment-3"> 

    </div> 
</div> 

<script> 
$("#tabs").tabs(); 
</script> 

</body> 
</html>

看它是什麼樣子看到這fiddle

完整參考請參閱here

來源

2014-03-06 12:00:21

感謝您的回覆mahmoud，有沒有我當前編碼的任何腳本，因爲更改代碼會花費很多時間。 – Caloyz

這是>>>>>>嘗試這種最簡單的方法：

HTML

<div class="section-container auto" data-section="" data-option="deep_linking;true;"> 
<section class="active"> 
<p class="title" data-section-title=""><a id="tab1" href="#tab1"><span>tab1</span></a> </p> 
<div class="content" data-slug="loans" data-section-content="" id="panel1"> 
<h1>tab1</h1></div> 

<p class="title" data-section-title=""><a id="tab2" href="#tab2"><span>tab2</span></a></p> 
<div class="content" data-slug="tab2" data-section-content="" id="panel2"> 
<h1>tab2</h1> 
</div>

jQuery的

$(document).ready(function(){ 

    $('#panel1').hide(); 
    $('#panel2').hide(); 

    $('#tab1').click(function(){ 
     $('#panel1').show(); 
     $('#panel2').hide(); 
    }); 

    $('#tab2').click(function(){ 
     $('#panel2').show(); 
     $('#panel1').hide(); 
    }); 



});

演示：here

來源

2014-03-07 11:13:58

謝謝，但我需要的是直接鏈接到標籤，如「http://foo.com/tabs#tab2」 – Caloyz

在最簡單的條款你的標記woul d與您的選項卡成爲<ul>，然後是這些選項卡內容的一疊容器。你目前的標記將它們放在同一個容器內，這會使效果難以實現。

<ul class="tabs"> 
    <li class="tab1">Tab Title</li> 
    <li class="tab2">Tab Title2</li> 
</ul> 
<div class="tab-content"> 
    <p class="tab1">Content for tab 1</p> 
    <p class="tab2">Content for tab 2</p> 
</div>

Here's a fiddle - 調整的CSS，你認爲合適的，但你真的不需要JQuery用戶界面剛剛建立的標籤。

來源

2014-03-07 11:39:13 Dawson

如何鏈接節選項卡

回答

相關問題