使用jQuery進行單頁網站導航

Question

我不是要創建垂直滾動或平滑滾動，將jquery放在一起時會感到困惑，因為我對此很陌生。 我知道我需要創建一個帶有參數的函數，以接受與我的鏈接配合使用的部分名稱。
我有一個主要部分，它將以完整的導航顯示，當用戶單擊導航項時，我希望主要部分隱藏，然后我想添加一個活動類，僅顯示下一個“頁面” /部分的內容。

我創建了jsfiddle。

$(document).on('click','.nav-link',function(e){
    $('.section').closest('div').addClass('active');

});

function content(dv){
var dv = document.querySelectorAll('.nav-link[data-target]');
console.log(dv);

}
content();

我的html：

<div id="main">
    <div class="wrapper-menu">
    <!-- navigation -->
        <header>    
            <nav class="slide-in menu">
                <ul class="hide">
                    <li><a href="#" data-target="go" class="nav-link">Go dog go<span></span></a></li>
                    <li><a href="#" data-target="by" class="nav-link">Stop dog stop<span></span></a></li>
                    <li><a href="#" data-target="bike" class="nav-link">To a dog party<span></span></a></li>
                </ul>
            </nav>
        </header>
    </div>
</div>

https://jsfiddle.net/r_heneault/jyvzxeha/5/

我知道我想的太簡單了：|

Answer 1

如果您想隱藏內容的某些元素，可以在我的jsfiddle中查看一個示例

$(document).ready(function(){
$("li").click(function(){
        var a = $(this).attr('name')
     $("#"+a).hide();
});

}）;

因為我在您的問題中得到的是如何使某些內容可見或隱藏。 ps：已編輯。 https://jsfiddle.net/hfahrudin/jyvzxeha/7/

Answer 2

您在正確的軌道上！

雖然我建議您稍微調整一下標記以隱藏不應該看到的部分，但我已經調整了您的小提琴以使其符合我的要求： jsFiddle

注意：關鍵是（保持簡單，使用jQuery），並從鏈接中獲取ID（通過.data('target') ），然后使用該ID顯示相關的div。

對腳本的相關更改如下：

$(document).on('click','.nav-link',function(e){
    // get the div ID from the link's "data-target"
    var id = $(this).data('target');
    // hide ALL divs with the id
    $('.section > div[id]').hide();
    // show only the relevant div with the targeted ID
    $('#' + id).show();
});

備用：

如果您的目標是顯示隱藏相關的div.section ，那么再次-我建議您修改標記以使其更簡單。 但是，您可以使用此jQuery使用當前標記來執行此操作：

$(document).on('click','.nav-link',function(e){
  // get the ID
  var id = $(this).data('target');
  // hide all sections
  $('.section').hide();
  // show the section that contains the div with the target ID
  $('#' + id).closest('.section').show();
});

Answer 3

我想這就是你想要的...

因此，您需要提供li id以用作jQuery的選擇器。

然后使所有節的divs顯示：none; 與他們的身份證。

然后創建顯示的.active：繼承！important;。

從一開始就給divs class =“ active”之一。

因此，當單擊li＃go_go時，它將從其他div中刪除.active，然后將.active添加到#go中。

其他人也是如此。

 $(document).ready(function() { $('#go_go').click(function() { $('#by').removeClass('active'); $('#bike').removeClass('active'); $('#go').addClass('active'); }) }); $(document).ready(function() { $('#stop_stop').click(function() { $('#go').removeClass('active'); $('#bike').removeClass('active'); $('#by').addClass('active'); }) }); $(document).ready(function() { $('#bike_bike').click(function() { $('#go').removeClass('active'); $('#by').removeClass('active'); $('#bike').addClass('active'); }) }); 

 div#go { display: none; } div#by { display: none; } div#bike { display: none; } .active { display: block !important; } 

 <div id="main"> <div class="wrapper-menu"> <!-- navigation --> <header> <nav class="slide-in menu"> <ul class="hide"> <li id="go_go"><a href="#" data-target="go" class="nav-link">Go dog go<span></span></a></li> <li id="stop_stop"><a href="#" data-target="by" class="nav-link">Stop dog stop<span></span></a></li> <li id="bike_bike"><a href="#" data-target="bike" class="nav-link">To a dog party<span></span></a></li> </ul> </nav> </header> </div> </div> <ul id="content" class="layer"> <li> <!-- about --> <div class="section light"> <div id="go" class="active"> <a name="go"></a> <div class="content"> <h2>Go</h2> <p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead. Cum horribilem walking dead resurgere de crazed sepulcris creaturis, zombie sicut de grave feeding iride et serpens. Pestilentia, shaun ofthe dead scythe animated corpses ipsa screams. Pestilentia est plague haec decaying ambulabat mortuos. Sicut zeder apathetic malus voodoo. Aenean a dolor plan et terror soulless vulnerum contagium accedunt, mortui iam vivam unlife. Qui tardius moveri, brid eof reanimator sed in magna copia sint terribiles undeath legionis. Alii missing oculis aliorum sicut serpere crabs nostram. Putridi braindead odores kill and infect, aere implent left four dead.</p> <div> <h3>No</h3> </div> </div> </div> <!-- section --> </li> <li> <!-- about --> <div class="section light"> <div id="by"> <a name="by"></a> <div class="content"> <h2>BY</h2> <p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead. Cum horribilem walking dead resurgere de crazed sepulcris creaturis, zombie sicut de grave feeding iride et serpens. Pestilentia, shaun ofthe dead scythe animated corpses ipsa screams. Pestilentia est plague haec decaying ambulabat mortuos. Sicut zeder apathetic malus voodoo. Aenean a dolor plan et terror soulless vulnerum contagium accedunt, mortui iam vivam unlife. Qui tardius moveri, brid eof reanimator sed in magna copia sint terribiles undeath legionis. Alii missing oculis aliorum sicut serpere crabs nostram. Putridi braindead odores kill and infect, aere implent left four dead.</p> <div> <h3>No</h3> </div> </div> </div> <!-- section --> </li> <li> <!-- about --> <div class="section light"> <div id="bike"> <a name="bike"></a> <div class="content"> <h2>Bike</h2> <p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead. Cum horribilem walking dead resurgere de crazed sepulcris creaturis, zombie sicut de grave feeding iride et serpens. Pestilentia, shaun ofthe dead scythe animated corpses ipsa screams. Pestilentia est plague haec decaying ambulabat mortuos. Sicut zeder apathetic malus voodoo. Aenean a dolor plan et terror soulless vulnerum contagium accedunt, mortui iam vivam unlife. Qui tardius moveri, brid eof reanimator sed in magna copia sint terribiles undeath legionis. Alii missing oculis aliorum sicut serpere crabs nostram. Putridi braindead odores kill and infect, aere implent left four dead.</p> <div> <h3>No</h3> </div> </div> </div> <!-- section --> </li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

哦，別忘了鏈接jQuery。

最好，李維斯

Answer 4

最簡單的是：

代替href="#" data-target="go"與href="#go"等

$('.nav-link').on('click',function(e){
    $('.active').removeClass('active');
    $(e.target.getAttribute('href')).closest('div').addClass('active');

});

並添加這樣的CSS：

.section.light > div {
  display:none;
}

.section.light > .active {
  display:block;
}

Answer 5

使您煩惱的一個關鍵因素是，您只要在鏈接的任何單擊上都向所有內容添加一個活動類，並且該類在任何時候都不會被刪除。 另一個是您沒有css根據您提供的類來隱藏和顯示內容。 活動類已附加，但沒有指令可以執行任何實際操作，而您要在css中進行設置。

請看以下代碼/小提琴，以獲取所需內容的工作示例。

$(document).ready(function() {
    $('.nav-tabs > li > a').click(function(event){
    event.preventDefault();//stop browser to take action for clicked anchor

    //get displaying tab content jQuery selector
    var active_tab_selector = $('.nav-tabs > li.active > a').attr('href');

    //find actived navigation and remove 'active' css
    var actived_nav = $('.nav-tabs > li.active');
    actived_nav.removeClass('active');

    //add 'active' css into clicked navigation
    $(this).parents('li').addClass('active');

    //hide displaying tab content
    $(active_tab_selector).removeClass('active');
    $(active_tab_selector).addClass('hide');

    //show target tab content
    var target_tab_selector = $(this).attr('href');
    $(target_tab_selector).removeClass('hide');
    $(target_tab_selector).addClass('active');
     });
  });

https://jsfiddle.net/messerino/thwxnddn/