我的页面上有多个选项卡，我希望每次用户访问该页面时，第一个选项卡都是默认的

时间：2016-08-12 22:07:45

标签： javascript jquery html tabs

因此，在我的页面上，我有3个标签，快速入门，常见问题解答和支持文档。我希望当有人来到该页面时，快速启动会自动打开。

当他们点击另一个标签时，快速启动也会消失。它不会保持在顶部，而其他标签中的其他信息则位于其下方。

示例：您进入此页面并且标签位于此处，快速启动会自动打开，显示其内容。

 **Quick start**         **FAQ**           **Support Docs**
 blah blah balh
 blah blah blah

然后点击您点击常见问题解答 

 **Quick start**         **FAQ**           **Support Docs**
                        blah blah blah

常见问题信息显示和快速启动信息消失。如果有人能帮助我，我会很感激。我已添加以下所有代码。请帮助

<!DOCTYPE html>
<html>
<style>

ul.tab {
    list-style-type: none;
    margin-left: 100px;
    padding: 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
    border: 2px solid #f7931c;
    margin-left: 70px;

}

/* Change background color of links on hover */
ul.tab li a:hover {
    background-color: #f7931c;
    color: #ffffff;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
    background-color: #f7931c;
    color: #ffffff;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
</style>
<body>

<ul class="tab">
  <li class="active"><a href="#" class="tablinks"  onclick="openCity(event,    'quick-start')">Quick Start</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event,  'faq')">FAQ</a>   </li>
  <li><a href="#" class="tablinks" onclick="openCity(event, 'suport-   docs')">Support Docs</a></li>
</ul>

<div id="quick-start" class="tabcontent">
  <h3>Assembly & Setup</h3>
<iframe width="560" height="315"     src="https://www.youtube.com/embed/NSnubfVZLSA" frameborder="0"     allowfullscreen></iframe>
  <h3>How it Works</h3>
<iframe width="560" height="315"     src="https://www.youtube.com/embed/0unrtD22w38" frameborder="0"     allowfullscreen></iframe>
</div>


<div id="faq" class="tabcontent">
  <head>
<style>
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 5px;
    margin-bottom: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 12px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #f7931c;
}

div.panel {
    padding: 0 0px;
    display: none;
   background-color: white;
}

div.panel.show {
    display: block !important;
}



<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}
</script>



<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace("  active",       "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";

   }
</script>

</body>
</html>

2 个答案:

答案 0 :(得分：0)

<强> Working fiddle

默认情况下，您必须显示快速启动容器，以便为此添加内联样式：

<div id="quick-start" class="tabcontent" style="display:block">

或者您也可以通过点击就绪功能选项卡来使用javascript：

$(function(){
     $('.tablinks:eq(0)').click();
})

希望这有帮助。

答案 1 :(得分：0)

<style>
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 5px;
    margin-bottom: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 12px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #f7931c;
}

div.tabcontent {
    padding: 0 0px;
    display: none;
   background-color: white;
}

div.tabcontent.active{
    display: block !important;
}


ul.tab {
    list-style-type: none;
    margin-left: 100px;
    padding: 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
    border: 2px solid #f7931c;
    margin-left: 70px;

}

/* Change background color of links on hover */
ul.tab li a:hover ,ul.tab li a.active{
    background-color: #f7931c;
    color: #ffffff;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
</style>
       <ul class="tab">
      <li><a href="#quick-start" class="tablinks active">Quick Start</a></li>
      <li><a href="#faq" class="tablinks">FAQ</a></li>
      <li><a href="#cityName" class="tablinks">Support Docs</a></li>
    </ul>

    <div id="quick-start" class="tabcontent active">
      <h3>Assembly & Setup</h3>
    <iframe width="560" height="315"     src="https://www.youtube.com/embed/NSnubfVZLSA" frameborder="0"     allowfullscreen></iframe>
      <h3>How it Works</h3>
    <iframe width="560" height="315"     src="https://www.youtube.com/embed/0unrtD22w38" frameborder="0"     allowfullscreen></iframe>
    </div>


    <div id="faq" class="tabcontent"> lksajbfvlskjdbfbmklsdlfk bmjn </div>
    <div id="cityName" class="tabconte`enter code here`nt">
    kijbdvskj bvksbvk b
    </div>
<script>
function initTabs(){
var tabs = document.getElementsByClassName("tablinks");
    for (i = 0; i < tabs.length; i++) {
            register_tab(tabs[i]);
   }
}

function register_tab(tab){
     tab.addEventListener('click', function (e) {
            e.preventDefault();
            var href = tab.href.split('#')[1];
            var panel = document.querySelector('#' + href);
            resetTabs();
            addClass(tab,'active');
            addClass(panel,'active');
        });
}

function resetTabs(){
var tabs = document.getElementsByClassName("tablinks");
    for (i = 0; i < tabs.length; i++) {
      var href = tabs[i].href.split('#')[1];
      var panel = document.getElementById(href);
     removeClass(panel,'active');
     removeClass(tabs[i],'active');
   }
}

function addClass(el, className) {
    if (el.classList)
        el.classList.add(className)
    else if (!hasClass(el, className))
        el.className += " " + className
}

function removeClass(el, className) {
    if (el.classList)
        el.classList.remove(className)
    else if (hasClass(el, className)) {
        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)')
        el.className = el.className.replace(reg, ' ')
    }
}

initTabs();
</script>

我希望这就是你要求的。 检查这个js fiddle out https://jsfiddle.net/httsggkh/的工作示例

相关问题
最新问题