Question

大家好我需要帮助的部分我正在使用section-container auto和deep_linking; true 我还有每个标签的数据slug，

我有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>

Answer 1

这是最简单的方法＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;试试这个：

<强> 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

Answer 2

您可以使用jquery UI库制作标签和面板

尝试使用此代码来弄清楚什么是jquery ui tabs：

<!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

Answer 3

简单来说，您的标记可以是带有标签的<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 UI来构建标签。

Answer 4

我做过这些人，我刚刚添加了一个脚本：

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

它检查url中的哈希然后设置section class =“Active”。谢谢各位回复。

如何链接部分选项卡

4 个答案: