2

こんにちは。最初に、私は jQuery をあまり使用していないことを説明させてください。シンプルな表示と非表示と基本的な UI 程度です。そうは言っても、実際には「リンク」にリンクされた「ページ」であるdivを表示できるようにしようとしています。

マークアップ:

<body>
<!--Footer and Navigation Div's-->
<div id="bg"><img src="images/bg.jpg" alt=""></div>
    <div id="footer">
        <p>S.E. <span>yoga</span></p>
            <div id="nav">
                <ul><a href="#">Link 1</a></ul>
                <ul><a href="#">Link 2</a></ul>
                <ul><a href="#">Link 3</a></ul>
                <ul><a href="#">Link 4</a></ul>
            </div>
    </div>
<!--END Footer and Navigation Div's-->

<div class="parent">
<div class="a">
        <p>this is a</p>
    </div>   
   <div class="b">
        <p>this is b</p>
    </div>
    <div class="c">
        <p>this is c</p>
    </div>
    <div class="d">
        <p>this is d</p>
    </div>
</body>
</html>

jQuery:

 /*
 $(document).ready(function(){
 $('#nav').click(function(){
        $(".a").slideToggle();
  var divname= this.value;
          $("#"+divname).show("slow").siblings().hide("slow");

    });
});*/ 

    $(document).ready(function(){
    $('.a, .b, .c, .d').hide();
});;

そのため、最初に使用していた (コメント アウトされた) スクリプトを出発点として使用するつもりでした。それらがすべて隠されている 2 番目のスクリプトは、私が行こうとしていた場所です。それらをすべて非表示にしてから、一度に 1 つだけ表示します。

divが重なっています。何か助けはありますか？ありがとう！

4

2 に答える 2

2

これを使用できます

 $(document).ready(function(){
         $('.parent  div').hide(); // hide div's on load using parent class as a starting point     
         $('#nav a').click(function() {  // on the anchor clicks that are inside div with id=nav
            var $div = $('.parent div').eq($(this).index('#nav a'));  // get the relevant div
            $div.show();  // show the relevant div
            $('.parent div').not($div).hide();  // hide all but the relevant div
        });​
    }):

編集：

$('.parent div') // <-- これにより、親クラスを持つ要素の下にあるすべての div が取得されます

.eq(index) // 次の指定されたインデックスで要素を取得します

$(this)// <-- 現在クリックされているアンカータグ

.index('#nav a'); // <--他のアンカー タグと比較した現在のアンカー タグのindex()を取得します

奇妙なことに、私は通常 $(this).index() を使用して動作しますが、今回は動作しなかったため、インデックス内でセレクターを指定する必要がありました。

また、代わりにこのように見えるようにhtmlを修正してください 

 <div id="nav">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>
</div>

更新されたフィドル

http://jsfiddle.net/HpCWW/1/

于 2012-08-02T17:45:34.763 に答える
0

一度に 1 つの div のみを表示する場合は、jquery アコーディオンの使用を検討してください。http://jqueryui.com/demos/accordion/

于 2012-08-02T17:27:29.197 に答える