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

On my page i have some custom links(tabs). on clicking respective link its content is shown. By default the first tab class is selected and its content is shown rest are set to display:none; clicking any other link will result in assigning class selected to it and setting it to display:block; and rest to display:none;. Here is the html when page loads.

在我的页面上,我有一些自定义链接(标签)。在点击相应的链接时,会显示其内容。默认情况下,第一个选项卡类被选中,其内容显示为rest,设置为display:none;单击任何其他链接将导致分配选定的类并将其设置为display:block;和休息显示:无;。这是页面加载时的html。

Html

<div class="vtabs">
<a href="#tab-order" 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 id="label_tab" href="#tab-label">HX Endicia Labels</a> 
</div>

<div id="tab-order" class="vtabs-content" style="display: block;">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" style="display: none;">Tab5</div>

What i want is to have a check that if some given condition is true than load the last tab on page load. like

我想要的是检查一些给定条件是否为真,而不是加载页面加载时的最后一个选项卡。喜欢

Html

<div class="vtabs">
<a href="#tab-order">Order Details</a> 
<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 id="label_tab" href="#tab-label"  class="selected">HX Endicia Labels</a> 
</div>

<div id="tab-order" class="vtabs-content" style="display: block;">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" style="display: none;">Tab5</div>

For this i did some thing like this in my view file but didn't work. iam getting this error in console "Uncaught TypeError: Cannot set property 'className' of null"

为此,我在我的视图文件中做了一些这样的事情但是没有用。我在控制台中收到此错误“Uncaught TypeError:无法设置属性'className'为null”

<script type="text/javascript">
function run(){
alert('testing');
document.getElementById('label_tab').className = 'selected';
document.getElementById('tab-label').style.display = 'block';
}
function hideAllTabs() {
var tab_contents = document.getElementsByClassName('vtabs-content');
for (var i = 0; i < tab_contents.length; ++i) {
tab_contents.style.display = 'none';
}
}

<?php
if (!isset($labeltab)) {

echo "hideAllTabs();";
echo "run();";
}
?>
</script>

3 个解决方案

#1

The code that you have will work. You just need to make sure that the script code is either:

您拥有的代码将起作用。您只需要确保脚本代码是:

a) Below the HTML

a)HTML下面

b) Ran after page has finished loading.

b)页面加载完成后。

What I would do in your place, I would create a function that, first of all, hides all of the tabs - helps you not have multiple tabs open at the same time.

我会在你的位置做什么,我会创建一个功能,首先,隐藏所有标签 - 帮助你不要同时打开多个标签。

A simple Javascript function to hide your tabs (since they all share the same class):

一个简单的Javascript函数来隐藏您的标签(因为它们都共享同一个类):

function hideAllTabs() {
    var tab_contents = document.getElementsByClassName('vtabs-content');
    for (var i = 0; i < tab_contents.length; ++i) {
        tab_contents.style.display = 'none';
    }
}

#2

you can use my solution with tabs on FIDDLE

你可以使用我的解决方案与FIDDLE标签

HTML here:

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

JS here:

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');
            });
        }
    });
});

and CSS here:

和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%;
}

you can use my solution with tabs on FIDDLE

你可以使用我的解决方案与FIDDLE标签

#3

seems you dont need js just use php:

似乎你不需要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>