0

1ページのみを使用してWebサイトを構築しようとしています。<section>これらのセクションをページとして使用しています。右側に固定されたナビがあります。以下を使用します。

<ul class="navigation">
        <li id="link1">ABOUT</li>
        <li id="link2">WHY HIRE ME</li>
        <li id="link3">JOURNEY</li>
        <li id="link4">INSTAGRAM</li>
        <li id="link5">CONTACT</li>         
    </ul>

次の CSS を使用してそのリストのスタイルを設定したので、ブラウザ ウィンドウの左側に固定されたままになります。

.navigation{
position:fixed;
z-index:1;
top:20px;
font-size:12px;
font-family: Georgia, serif;}

私はいくつかのjQueryで手を試しましたが、ひどく失敗しています。理想としては、サイトを開いたときにセクション 1 が表示されるようにしたいです。そして残りは非表示にします。ユーザーがリンクをクリックすると、リンクが関連付けられているセクション以外のすべてのセクションを非表示にしたいと考えています。

私は .remove / .appendTo 関数を .click で見て試してみましたが、苦労しています

4

3 に答える 3

1

実際に要素を削除または追加するのではなく、jQuery には非表示/表示する組み込みのメソッドがあり、それらの可視性を false に設定し、ブラウザは欠落している要素が本当に存在しないかのように隣接する要素をレンダリングします。

あなたはそれを使用することができます：

$('#myelement').hide();
$('#myelement').show();

グループ全体を行うには、共通の css クラスを提供します (そのクラスにスタイルが添付されていなくても)。

$('.mylinkgroup1').hide();
$('.mylinkgroup2').show();

http://api.jquery.com/hide/

http://api.jquery.com/show/

于 2012-10-12T12:09:41.233 に答える
1

このHTML構造のようなもの

<div id="content_1">About content</div>
<div id="content_2">Why Hire Me content</div>
...

そしてこのjQuery

$('.navigation li').on('click', function ()
{
    var id = $(this).attr('id').substr( $(this).attr('id').indexOf('_') + 1 );

    $('div[id^="content_"]').hide();
    $('#content_' + id).show();
});
于 2012-10-12T12:10:08.650 に答える
0

マークアップ：

<ul class="navigation">
  <li name="section1" id="link1">ABOUT</li>
  <li name="section2" id="link2">WHY HIRE ME</li>
  <li name="section3" id="link3">JOURNEY</li>
  <li name="section4" id="link4">INSTAGRAM</li>
  <li name="section5" id="link5">CONTACT</li>         
</ul>

<div class="section" id="section1">section1</div>
<div class="section" id="section2">section2</div>
<div class="section" id="section3">section3</div>
<div class="section" id="section4">section4</div>
<div class="section" id="section5">section5</div>

CSS：

.navigation{
  position:fixed;
  z-index:1;
  top:20px;
  font-size:12px;
  font-family: Georgia, serif;
}
.section { display: none; }

JS：

$('.navigation li').on('click', function() {
  $('.section').hide(); //hide all sections
  var whichSection = $(this).attr('name'); //get the section name 
  $('#'+whichSection).toggle(); //toggle it
});

JSFiddle
http://jsfiddle.net/neuroflux/LwQNR/2/

于 2012-10-12T12:12:13.167 に答える