jqueryを使用した単一ページのサイトナビゲーション

Question

私は垂直スクロールまたはスムーススクロールを作成しようとしていないので、jqueryを一緒に配置すると混乱します。私はセクション名が私のリンクと協調していることを受け入れるためにパラメータを持つ関数を作成する必要があることを知っています。
メインセクションが完全なナビゲーションで表示されます。ユーザーがnavアイテムをクリックしたときにメインセクションを非表示にしたい場合は、アクティブなクラスを追加して次の "ページ"/セクション。

私は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/

私は単純な何かをoverthinkingています知っています：|

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

を、あなたは、LiのIDのjQueryを使ってセレクタとして使用するために提供する必要があります。

次に、すべてのセクションのdivをdisplay：noneにします。彼らのIDで

次に、display：inherit！important;というアクティブなものを作成します。

最初からdivs = "active"のいずれかを指定します。

のli＃のgo_goがクリックされたときに、それが他のdivから.activeを削除し、その後、#goする.active追加されます。

他は同じです。

$(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帽子があなたを引き上げているのは、リンクのどのクリックでもすべてのコンテンツにアクティブなクラスを追加していて、いつでも削除されないということです。もう1つは、あなたがそれを与えるクラスに基づいてコンテンツを隠して表示する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/