帶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：editted。 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

我想這是你想要的...

所以，你需要給力的ID與jQuery選擇使用。

然後讓所有的div div顯示：none;與他們的身份證。

然後創建.active即display：inherit！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"> 
 
\t <div class="wrapper-menu"> 
 
\t <!-- navigation --> 
 
    \t \t <header> 
 
\t \t \t <nav class="slide-in menu"> 
 
\t \t \t \t <ul class="hide"> 
 
\t \t \t \t \t <li id="go_go"><a href="#" data-target="go" class="nav-link">Go dog go<span></span></a></li> 
 
\t \t \t \t \t <li id="stop_stop"><a href="#" data-target="by" class="nav-link">Stop dog stop<span></span></a></li> 
 
\t \t \t \t \t <li id="bike_bike"><a href="#" data-target="bike" class="nav-link">To a dog party<span></span></a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </nav> 
 
\t \t </header> 
 
\t </div> 
 
</div> 
 

 

 
<ul id="content" class="layer"> 
 
\t <li> <!-- about --> 
 
\t \t <div class="section light"> 
 
\t \t \t <div id="go" class="active"> 
 
\t \t \t <a name="go"></a> 
 
\t \t \t \t <div class="content"> 
 
\t \t \t \t \t <h2>Go</h2> 
 
\t \t \t \t \t <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> 
 
\t \t \t \t \t <div> 
 
\t \t \t \t \t \t <h3>No</h3> 
 

 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
    \t \t \t </div> <!-- section --> 
 
\t </li> 
 

 
\t <li> <!-- about --> 
 
\t \t <div class="section light"> 
 
\t \t \t <div id="by"> 
 
\t \t \t <a name="by"></a> 
 
\t \t \t \t <div class="content"> 
 
\t \t \t \t \t <h2>BY</h2> 
 
\t \t \t \t \t <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> 
 
\t \t \t \t \t <div> 
 
\t \t \t \t \t \t <h3>No</h3> 
 

 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
    \t \t \t </div> <!-- section --> 
 
\t </li> 
 
\t <li> <!-- about --> 
 
\t \t <div class="section light"> 
 
\t \t \t <div id="bike"> 
 
\t \t \t <a name="bike"></a> 
 
\t \t \t \t <div class="content"> 
 
\t \t \t \t \t <h2>Bike</h2> 
 
\t \t \t \t \t <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> 
 
\t \t \t \t \t <div> 
 
\t \t \t \t \t \t <h3>No</h3> 
 

 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
    \t \t \t </div> <!-- section --> 
 
\t </li> 
 
</ul> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

哦，不要忘了鏈接jQuery的。

最佳， 列維

Answer 4

簡單的將是這樣：

與href="#go"取代href="#" data-target="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

一鍵片t帽子讓你感到尷尬的是，你在任何鏈接點擊時都會向所有內容添加活動類，並且它在任何時候都不會被刪除。另一個是你沒有隱藏和顯示基於你給它的類的內容的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/