Javascript 如何在页面加载时关注特定选项卡

在我的页面上，我有一些自定义链接（选项卡）。单击相应的链接，将显示其内容。 默认情况下，选择第一个选项卡类并显示其内容，其余选项卡类设置为显示：无；单击任何其他链接将导致为其指定所选的类，并将其设置为“显示：块”；其余显示：无；。下面是页面加载时的html

Html

//默认情况下，其类处于选中状态
表1
表2
表3
表4
表5

我想要的是检查一下，如果某个给定条件为真，那么加载页面加载的最后一个选项卡。像

Html

表1
表2
表3
表4
表5

为此，我在我的视图文件中做了一些类似的事情，但没有成功。iam在控制台“Uncaught TypeError:无法将属性“className”设置为null”中遇到此错误

函数运行（）{
警报（“测试”）；
document.getElementById（'label_tab'）。className='selected'；
document.getElementById（'tab-label'）.style.display='block'；
}
函数HIDEALTLTABS（）{
var tab_contents=document.getElementsByClassName（'vtabs-content'）；
对于（变量i=0；i

您拥有的代码将起作用。您只需确保脚本代码为：

a） 在HTML下面

b） 在页面完成加载后运行

在你的位置上，我会创建一个函数，首先，隐藏所有选项卡-帮助你避免同时打开多个选项卡

一个用于隐藏选项卡的简单Javascript函数（因为它们都共享同一个类）：

函数HIDEALTLTABS（）{ var tab_contents=document.getElementsByClassName（'vtabs-content'）； 对于（变量i=0；i您可以使用带有选项卡的“我的解决方案”

此处为HTML：

<div class="tab-nav">
    <ul class="tabs">
        <li rel="tab1" class="active">Tab1</li>
        <li rel="tab2">Tab2</li>
        <li rel="tab3">Tab3</li>
    </ul>
</div>
<div class="tabsContent">
    <div id="tab1" class="tab active">
        1Lorem ipsum dolor sit amet, consectetur adipisicing elit.1 
    </div>

    <div id="tab2" class="tab">
        2Lorem ipsum dolor sit amet, consectetur adipisicing elit.2
    </div>

    <div id="tab3" class="tab">
        3Lorem ipsum dolor sit amet, consectetur adipisicing elit.3
    </div>
</div>

和CSS在这里：

.tab-navigacija{
    margin-top: 80px;
}

ul.tabs{
    list-style: none;
    margin:0;
    padding:0;
}

ul.tabs li{
    float: left;
    padding:10px;
    cursor: pointer;
}

ul.tabs li.active{
    background: #efefef;
}



.tab{
    display: none;
    background: #efefef;
    padding:20px;
}

.tab.active{
    display: block;
}

.tabsContent {
    clear: both;
    display: block;
    width: 100%;
}

---

您可以在

上的选项卡上使用我的解决方案。似乎您不需要js，只需使用php即可：

<div class="vtabs">
<a href="#tab-order" <?php echo isset($labeltab) ? "class='selected'" : "" ; ?>>Order Details</a> // by default its class is selected 
<a href="#tab-payment">Payment Details</a>
<a href="#tab-shipping">Shipping Details</a>
<a href="#tab-product">Products</a>
<a href="#tab-history">History</a>
<a href="#tab-label" <?php echo !isset($labeltab) ? "class='selected'" : "" ; ?>>HX Endicia Labels</a> 
</div>

<div id="tab-order" class="vtabs-content" <?php echo isset($labeltab) ? "style='display: block;'" : "style='display: none;'" ; ?>>Tab1</div>
<div id="tab-payment" class="vtabs-content" style="display: none;">Tab2</div>
<div id="tab-shipping" class="vtabs-content" style="display: none;">Tab3</div>
<div id="tab-product" class="vtabs-content" style="display: none;">Tab4</div>
<div id="tab-label" class="vtabs-content" <?php echo !isset($labeltab) ? "style='display: block;'" : "style='display: none;'" ; ?>>Tab5</div>

//默认情况下，其类处于选中状态
如何隐藏所有标签？我已经编辑了答案。希望你已经解决了你的问题。我没有得到正确的流程。我的意思是什么时候调用这个函数，什么时候调用我自己的函数，它将显示我最后一个tabel on if check true？我在回答中写道，在哪里放置生成Javascript的PHP代码是正确的。要隐藏所有选项卡（一旦你根据我上面的评论添加了结束符：
$（“.vtabs content”）.hide（）
Btw，你的HTML格式不好：标签的
s都需要关闭
s。还有一个
@robinmckenzie，我复制的不好，实际上很好。你提供的解决方案不反对我问的问题你说的
不反对
先生@AmmarUlHassan是什么意思？我只写了“js标签样本”在我的路上，没有问题：）你在哪里设置$labeltab？所以。。。你的控制器在这段代码之前吗？？
function hideAllTabs() {
    var tab_contents = document.getElementsByClassName('vtabs-content');
    for (var i = 0; i < tab_contents.length; ++i) {
        tab_contents.style.display = 'none';
    }
}

<div class="tab-nav">
    <ul class="tabs">
        <li rel="tab1" class="active">Tab1</li>
        <li rel="tab2">Tab2</li>
        <li rel="tab3">Tab3</li>
    </ul>
</div>
<div class="tabsContent">
    <div id="tab1" class="tab active">
        1Lorem ipsum dolor sit amet, consectetur adipisicing elit.1 
    </div>

    <div id="tab2" class="tab">
        2Lorem ipsum dolor sit amet, consectetur adipisicing elit.2
    </div>

    <div id="tab3" class="tab">
        3Lorem ipsum dolor sit amet, consectetur adipisicing elit.3
    </div>
</div>

jQuery(document).ready(function(){
    jQuery('.tabs li').on('click', function(){
        jQuery('.tabs li.active').removeClass('active');
        jQuery(this).addClass('active');

        var selectTab = jQuery(this).attr('rel');

        jQuery('.tab.active').hide(0,tab);

        function tab() {
            jQuery(this).removeClass('active');

            jQuery('#'+selectTab).show(0,function(){
                jQuery(this).addClass('active');
            });
        }
    });
});

.tab-navigacija{
    margin-top: 80px;
}

ul.tabs{
    list-style: none;
    margin:0;
    padding:0;
}

ul.tabs li{
    float: left;
    padding:10px;
    cursor: pointer;
}

ul.tabs li.active{
    background: #efefef;
}



.tab{
    display: none;
    background: #efefef;
    padding:20px;
}

.tab.active{
    display: block;
}

.tabsContent {
    clear: both;
    display: block;
    width: 100%;
}

<div class="vtabs">
<a href="#tab-order" <?php echo isset($labeltab) ? "class='selected'" : "" ; ?>>Order Details</a> // by default its class is selected 
<a href="#tab-payment">Payment Details</a>
<a href="#tab-shipping">Shipping Details</a>
<a href="#tab-product">Products</a>
<a href="#tab-history">History</a>
<a href="#tab-label" <?php echo !isset($labeltab) ? "class='selected'" : "" ; ?>>HX Endicia Labels</a> 
</div>

<div id="tab-order" class="vtabs-content" <?php echo isset($labeltab) ? "style='display: block;'" : "style='display: none;'" ; ?>>Tab1</div>
<div id="tab-payment" class="vtabs-content" style="display: none;">Tab2</div>
<div id="tab-shipping" class="vtabs-content" style="display: none;">Tab3</div>
<div id="tab-product" class="vtabs-content" style="display: none;">Tab4</div>
<div id="tab-label" class="vtabs-content" <?php echo !isset($labeltab) ? "style='display: block;'" : "style='display: none;'" ; ?>>Tab5</div>