单击页面上的 link 将更改新页面上显示的选项卡

Question

我希望有人能指出我正确的方向。 HTML 和 CSS 是我的事，而 Jquery 在我的脑海中从来没有真正发挥过作用。但是我一直在努力解决这个问题并且几乎让它工作，但在最后一点上挣扎。

在一页上 (tabs.html) 我有一些选项卡会根据按钮的点击 blocking/none div 进行更改

<div id="tab-holder">
    <button class="tabs active" onclick="openTab('everyday')"><span>Every Day Menu</span></button>
    <button class="tabs" onclick="openTab('sunday')"><span>Sunday Menu</span></button>
    <button class="tabs" onclick="openTab('buffet')"><span>Buffet Menu</span></button>   
    <button class="tabs" onclick="openTab('xmas')"><span>Christmas Menu</span></button> 
</div>  

<div id="everyday">
   Everyday menu goes here
</div>
<div id="sunday">
   Sunday menu goes here
</div>
<div id="buffet">
   Buffet menu goes here
</div>
<div id="xmas">
   xmas menu goes here
</div>

然后对于 jquery 我使用这个：

function openTab(tabName) {
var i;
var x = document.getElementsByClassName("tabs__content");
for (i = 0; i < x.length; i++) {
    x[i].style.display = "none"; 
}
document.getElementById(tabName).style.display = "block"; 
}

var btnContainer = document.getElementById("tab-holder");

// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("tabs");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
});
}

我是从网上得到的，但我很确定我知道它是如何工作的。而且一切正常！

但我也希望能够 link 直接从其他 html 页面转到选项卡。例如，有一个 link 打开 tabs.html 但自动显示 "buffet" 选项卡。

有人建议我使用查询字符串来完成。所以我有另一个 HTML 页面，link 可以用

标记

<a href="tab-test.html?var1=buffet">Buffet</a>

并在 tabs.html 中添加了以下代码：

var vars = [], hash;
    var q = document.URL.split('?')[1];
    if(q != undefined){
        q = q.split('&');
        for(var i = 0; i < q.length; i++){
            hash = q[i].split('=');
            vars.push(hash[1]);
            vars[hash[0]] = hash[1];
        }
}



$(document).ready(function(){

   var tabName = vars['passTab']
    alert("tabs--"+tabName);

    var i;
    var x = document.getElementsByClassName("tabs__content");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none"; 
    }
    document.getElementById(tabName).style.display = "block"; 


})

这很好，因为它会显示正确的 tab/div，但我正在努力让按钮更改为正确的活动状态。据我所知，原始代码通过监听点击事件改变了活动状态，因为这是一个加载事件，所以没有点击。所以我正在努力如何让它改变按钮的活动状态。

抱歉，这很长，但我想解释一下我是如何到达目的地的。如果我以错误的方式进行此操作，我很高兴被指向另一个方向！ :)

提前致谢

菲尔

Answer 1

与其手动触发选项卡内容的显示状态，不如调用您已有的openTab()函数，将变量传递给它：

$(document).ready(function(){
   var tabName = vars['passTab']
   openTab(tabName);
})

它将处理按钮状态以及您在通过单击按钮处理选项卡更改时所做的所有其他操作。

您还需要更改获取 URL 参数的代码。如果您登录 vars['passTab']，您会看到它 returns undefined。因此，alert 的输出应该不同于您 expected.Make vars 对象而不是数组，并删除行 vars.push(hash[1]);:

var vars = {}, hash;
    var q = document.URL.split('?')[1];
    if(q != undefined){
        q = q.split('&');
        for(var i = 0; i < q.length; i++){
            hash = q[i].split('=');
            vars[hash[0]] = hash[1];
        }
}

我对您的类进行了一些更改，并仅使用 jQuery 重写了 openTab() 函数，以提供可读且有效的示例。尽管第一个选项卡在标记中处于活动状态，但它在 xmas 选项卡处于活动状态时启动，以使用 URL 参数中的 xmas 伪造调用 openTab() 函数：

function openTab(tabName) {
  // handle active button state
  $('#tab-holder .tab-' + tabName).addClass('active').siblings('.active').removeClass('active');
  // handle tab content switching
  $('.tab-content').hide().filter('#' + tabName).show()
}

var vars = {}, hash;
    var q = document.URL.split('?')[1];
    if(q != undefined){
        q = q.split('&');
        for(var i = 0; i < q.length; i++){
            hash = q[i].split('=');
            vars[hash[0]] = hash[1];
        }
}

$(document).ready(function(){
   var tabName = vars['passTab'];
   // commented out because it won't work in this demo
   // openTab(tabName);
   openTab('xmas')
})

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.tabs.active {
  outline: solid red 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tab-holder">
    <button class="tabs tab-everyday active" onclick="openTab('everyday')"><span>Every Day Menu</span></button>
    <button class="tabs tab-sunday" onclick="openTab('sunday')"><span>Sunday Menu</span></button>
    <button class="tabs tab-buffet" onclick="openTab('buffet')"><span>Buffet Menu</span></button>   
    <button class="tabs tab-xmas" onclick="openTab('xmas')"><span>Christmas Menu</span></button> 
</div>  

<div id="everyday" class="tab-content active">
   Everyday menu goes here
</div>
<div id="sunday" class="tab-content">
   Sunday menu goes here
</div>
<div id="buffet" class="tab-content">
   Buffet menu goes here
</div>
<div id="xmas" class="tab-content">
   xmas menu goes here
</div>

附带说明一下，我想知道为什么您使用 jQuery 但您的大部分代码都使用 for 循环和原生 JS 函数，例如 getElementsByClassName？添加一个仅使用 $(document).ready() 的库似乎有点矫枉过正。

Answer 2

你可以试试下面的方法

Html

<div id="tab-holder">
    <button class="myButton" data-id="everyday"><span>Every Day Menu</span</button>
    <button class="myButton" data-id="sunday"><span>Sunday Menu</span></button>
    <button class="myButton" data-id="buffet"><span>Buffet Menu</span></button>   
    <button class="myButton" data-id="xmas"><span>Christmas Menu</span></button> 
</div>  
<div class="tab-cont">
  <div id="everyday" class="selected">
     Everyday menu goes here
  </div>
  <div id="sunday">
     Sunday menu goes here
  </div>
  <div id="buffet">
     Buffet menu goes here
  </div>
  <div id="xmas">
     xmas menu goes here
  </div>
</div>

Css

.tab-cont >div{
  display: none;
}
.tab-cont >div.selected{
  display: block;
}

Js

$(document).on('click','#tab-holder > button', function(){
  var id = $(this).data('id');
  $('.tab-cont >div').removeClass('selected');
  $('.tab-cont #' + id).addClass('selected');
})

单击页面上的 link 将更改新页面上显示的选项卡

Clicking a link on a page that will change the tabs displayed on the new page

html

jquery

tabs

query-string