Javascript 如何链接分区选项卡_Javascript_Jquery_Html

Javascript 如何链接分区选项卡

javascript jquery html

Javascript 如何链接分区选项卡,javascript,jquery,html,Javascript,Jquery,Html,大家好，我需要帮助的部分，我正在使用节容器自动与深_链接；真的每个标签上都有数据段塞我有3个标签上有图像，所以基本上我想有一个直接的链接访问每个单独的标签，在主页上有一个链接。我尝试添加location.hash脚本，也尝试了.on click和.trigger，但都不起作用非常感谢 <body> <div class="section-container auto" data-section="" data-option="deep_linking;true;">

大家好，我需要帮助的部分，我正在使用节容器自动与深_链接；真的每个标签上都有数据段塞

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


表1
表1

表2

您可以使用jquery UI库创建选项卡和面板

请尝试以下代码了解什么是jquery ui选项卡：

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

$（“#制表符”）.tabs（）；看看它是什么样子看到了吗

有关完整的参考信息，请参见

这是最简单的方法>>>>>>>尝试以下方法：

HTML

$(document).ready(function (){

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

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

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



});

Demo：

用最简单的术语来说，您的标记是一个带有选项卡的

，然后是一堆容器，用于存放这些选项卡的内容。当前标记将它们放在同一个容器中，这将使效果很难实现

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


选项卡标题
选项卡标题2

选项卡1的内容
选项卡2的内容

--根据您的需要调整CSS，但您确实不需要JQuery UI来构建选项卡。

伙计们，我已经完成了，我只是添加了一个脚本：


$（文档）.ready（函数（）{
$（'section'）.removeClass（'active'）；
var hash=window.location.hash；
如果（哈希！=''）
{ 
$（'section'+hash）.addClass（'active'）；
}         
});

它检查url中的哈希，然后设置class=“Active”部分。

谢谢大家的回复

请提供您的代码。感谢JF it的回复，我包括了代码i'm not seen your script:/您能提供吗？JSFIDLE将是完美的。如果你提供更多，应该很容易想出解决方案：）@JF it我没有任何脚本，它是纯html的，但是脚本会很有用，我想当一个页面加载它时，检查url是否导航了哪个选项卡。谢谢你的回复mahmoud，有没有脚本用于我当前的编码，因为更改代码将花费大量时间。谢谢，但我需要的是直接链接到选项卡，如“”

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

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