當我們使用javascript單擊垂直選項卡時，如何顯示頁面標題和菜單

Question

垂直標簽使用javascript。 垂直選項卡工作正常，但是我看不到頁面標題和菜單部分，當我單擊選項卡時，只有我可以看到div信息。 頭。

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

開了個小提琴： http : //jsfiddle.net/filever10/4sKNc/