0

こちらをご覧ください

すべての div は非表示になり、メニューから 1 つのボタンをクリックすると、特定のコンテンツ (div) が表示され、その他は非表示になります。ホームページと選択したコンテンツのみが表示されます。私の質問は... jqueryを使用してこれを行うにはどうすればよいですか? 最初の div 以外のすべてのコンテンツを非表示にし、メニューをクリックすると選択したコンテンツが表示されるようにするにはどうすればよいですか?

例：

私のメニューは次のようになります。

<nav>
<ul>
<li><a href="#home" class="active">Home</li>
    <li><a href="#page1">Page 1</li>
    <li><a href="#page2">Page 2</li>
    <li><a href="#page3">Page 3</li>
</ul>
</nav>

<article id="page1">
<div class="container">
    <h1>Page 1</h1>
        <p>Page 1 content</p>
</div>
</article>


 <article id="page2" class="dark">
<div class="container">
    <h1>Page 2</h1>
    <p>Page 2 content</p>
</div>
</article>


  <article id="page3">
<div class="container">
    <h1>Page 3</h1>
    <p>Page 3 content</p>
</div>
 </article>
4

7 に答える 7

1

hrefターゲット要素の と同じアンカー値を変更できますid:

<li><a href="#home" class="active">Home</li>
<li><a href="#page1">Page 1</li>
<li><a href="#page2">Page 2</li>
<li><a href="#page3">Page 3</li>


$('a:not(:first)').click(function(e){
  e.preventDefault()
  var href = $(this).attr('href')
  $('article').hide();
  $(href).show()
})

デモ

于 2012-07-12T20:09:51.777 に答える
0

私はイベントを使用することを好みますhashchange（IE7はそれをサポートしていませんが）-このアプローチは個々の記事をブックマーク可能にします：

$(window).on('hashchange',function() {
    var hash = location.hash;
    $('article').hide();
    $(hash).show();
});

$(document).ready(function() {
    $(window).trigger('hashchange');
});
于 2012-07-12T21:27:45.233 に答える
0

JQuery については知りませんが (なぜ多くの人がフレームワークに依存しているのですか?)、これは style.display 属性を使用して簡単に実現できます。表示/非表示を「ブロック」または「なし」に設定します。

于 2012-07-12T20:11:32.240 に答える
0

純粋な CSS では、次のことができますarticle { display:none; } article:first-child { display:block; }。これにより、最初のものが表示されarticle、残りは非表示になります。

于 2012-07-12T20:11:55.757 に答える
0

あなたが提供したスニペットは少し紛らわしいですが、おそらくtoggleを探していますか?

于 2012-07-12T20:09:43.547 に答える
0

CSS を使用して、最初は必要のないものを非表示にします。

.container { display:none; }

次に、次のように属性hrefとid属性を有効に使用できます。

$('.link').click(function(){
  var correspondingDivId = $(this).attr('href'); //get id of div to be shown

  $('.container').hide(); //hide all the containers

  $(correspondingDivId).show(); //show only the one we need

});

明らかに、マークアップを少し変更する必要があります。

<a href='#Div1'>Link 1 </a>
.
.
<div id="Div1" class="container"   />
于 2012-07-12T20:10:02.017 に答える
-1

ドキュメントを見てください: http://api.jquery.com/visual/ (Effects -> Basiscs -> show(speed, callback)) 少し勉強すれば、きっと一人でできるようになるでしょう。

于 2012-07-12T20:14:24.527 に答える