1

jQuery を使用して簡単なメニューを作成することを考えていました。メニューの項目をクリックすると、情報を含む div が表示されます。divを表示するためのfadeInとfadeOutを追加したいのですが、これを達成する方法がわかりません。

これは私が使用しているコードです

html:

<div id="wrap">
<ul id="divtoggle">
    <li><a id="togglediv1" href="#">show div 1</a></li>
    <li><a id="togglediv2" href="#">show div 2</a></li>
    <li><a id="togglediv3" href="#">show div 3</a></li>
</ul>
<div id="div1">
    <p>This is the content inside the first container</p>
</div>
<div id="div2">
        <p>This is the content inside the second container</p>
</div>
<div id="div3">
        <p>This is the content inside the third container</p>
</div>
</div>

jquery:

$("#divtoggle").delegate("a", "click", function(e) {
    var toggled = ($(this).prop("id"));
    $("div#wrap").prop("class", toggled);
});

CSS:

#div1, #div2, #div3 {
 display:none;   
}
.togglediv1 #div1, .togglediv2 #div2, .togglediv3 #div3{
 display:block;   
}

コード

4

2 に答える 2

0

次のようなことを試すことができます (css クラスを使用せずに):

マークアップ:

<div id="wrap">
    <ul id="divtoggle">
        <li><a id="togglediv1" href="#div1">show div 1</a></li>
        <li><a id="togglediv2" href="#div2">show div 2</a></li>
        <li><a id="togglediv3" href="#div3">show div 3</a></li>
    </ul>
   <div id="content">
        <div id="div1">
            <p>This is the content inside the first container</p>
        </div>
        <div id="div2">
            <p>This is the content inside the second container</p>
        </div>
        <div id="div3">
            <p>This is the content inside the third container</p>
        </div>
    </div>
</div>

jQuery:

$("#divtoggle").delegate("a", "click", function(e) {
    var id = ($(this).attr("href"));
    $("#content div").hide("slow");
    $(id).toggle("slow");
});

またはfadeOut、fadeInおよびfadeToggle効果を使用する:

$("#divtoggle").delegate("a", "click", function(e) {
    var id = ($(this).attr("href"));
    $("#content div").fadeOut("slow");
    $(id).fadeToggle("slow");
});

http://jsfiddle.net/hescano/6rSvf/256/

于 2013-09-04T17:42:52.753 に答える