javascript - 当我们使用 javascript 单击垂直选项卡时，如何显示页面标题和菜单

Question

使用 JavaScript 的垂直选项卡。垂直选项卡工作正常，但我看不到页眉和菜单部分，当我单击选项卡时，只有我可以看到 div 信息。 header 。

HTML:

 <ul>
    <li><a href="#a1">a1</a></li>
    <li><a href="#b1">b1</a></li>          
    </ul>
    <div id="sections">
    <div class="section" id="a1">
    </div>
    <div class="section" id="bb">
    </div>

http://www.ommas.co.th/containerdesiccants.html ，当我们单击选项卡时，页面不显示标题和菜单部分。如何解决这个问题

脚本 1:

     $(document).ready(function(){

    if (
        $('ul#verticalNav li a').length &&
        $('div.section').length
    ) {
        $('div.section').css( 'display', 'none' );
        //$('ul#verticalNav li a').each(function() {
        $('ul#verticalNav li a').click(function() { 
            showSection( $(this).attr('href') );
        });
  // if hash found then load the tab from Hash id
        if(window.location.hash) 
        {
   // to get the div id
           showSection( window.location.hash);
        }
        else // if no hash found then default first tab is opened
        {
            $('ul#verticalNav li:first-child a').click();
        }
    }
});
</script>

脚本2

function showSection( sectionID ) {
    $('div.section').css( 'display', 'none' );
    $('div'+sectionID).css( 'display', 'block' );
}
$(document).ready(function(){

    if (
        $('ul#verticalNav li a').length &&
        $('div.section').length
    ) {
        $('div.section').css( 'display', 'none' );
        //$('ul#verticalNav li a').each(function() { // no need for each loop
        $('ul#verticalNav li a').click(function() { // Use $('ul#verticalNav li a').click
            showSection( $(this).attr('href') );
        });
        //});
        if(window.location.hash) // if hash found then load the tab from Hash id
        {
           showSection( window.location.hash);// to get the div id
        }
        else // if no hash found then default first tab is opened
        {
            $('ul#verticalNav li:first-child a').click();
        }
    }
});

Answer 1

它跳转到id

这是 anchor 的href中#hash的默认行为。

$('ul#verticalNav li a').click(function() { 
    showSection( $(this).attr('href') );
});

应该是这样的:

$('ul#verticalNav a').click(function(e) {
    window.location.hash = $(this).attr('href');//update hash manually
    showSection(window.location.hash);//with newly updated hash
    //no jumping :: added both to make more browser compatible
    e.preventDefault();
    return false;
});

大局观

这可能更容易维护，并且还可以解决其他问题。

var vn = $('#verticalNav a'), ss = $('.section');//get elements

function showSection(sectionID) {
    $(sectionID).show().siblings().hide();//show current & hide siblings
}

if (vn.length && ss.length) {//if parts
    ss.hide();//hide sections
    vn.click(function(e) {//on tab click
        window.location.hash = $(this).attr('href');//update hash manually
        $(this).parent().addClass('on').siblings('.on').removeClass('on');//toggle active
        showSection(window.location.hash);//with newly updated hash
        e.preventDefault();//prevent default behavior
        return false;//return false
    });
    if (window.location.hash) {//if hash
        $('html, body').scrollTop(0);//no jump
        showSection(window.location.hash);//show slide
    } else {
        ss.eq(0).show();//show first slide
        vn.eq(0).parent().addClass('on');//make first tab active
    }
}

拉了一把 fiddle :http://jsfiddle.net/filever10/4sKNc/