0

スライド効果を使用して記事要素を非表示にして表示したい.ページを読み込んでホームをクリックすると、記事が画面に表示されている場合、私が書いたjsは問題なくスムーズに非表示にします. Us Link、スライド効果なしですぐに記事を表示します。

コード + html + 消失した CSS の表示と非表示を次に示します。

HTML:

<nav>
    <ul class="sf-menu sf-vertical">
        <li><a href=# onclick=home()>Home</a></li>
        <li><a href=#about onclick=about()>About Us</a></li>
        <li><a href=#>Cuisines</a>
            <ul>
                <li><a href=#starters>Starters</a></li>
                <li><a href=#>Main Dishes</a></li>
                <li><a href=#>Desserts</a></li>
                <li><a href=#>Mezes</a></li>
            </ul>
        </li>
        <li><a href=#>Wine List</a></li>
        <li><a href=#gallery>Gallery</a></li>
        <li><a href=#contacts>Contacts</a></li>
    </ul>
</nav>

<article class=vanished id=about>
    <h1>About Us</h1>
    <div class="main-wrapper scroll">
        <div class="wrapper clearfix">
            <img src=img/bazar-place.png alt=bazar-place width=222 height=150 class=about-img>
            <h4>Our Restaurant</h4>
            <p>Bazar is a restaurant located between the districts Haga and Vasastaden in Gothenburg with a focus on Turkish and Persian food of the best quality that creates opportunities for an exciting mix all the way, from appetizer to dessert.</p>
        </div>
        <div class="wrapper clearfix">
            <img src=img/belly.jpg alt=belly-dancing width=222 height=167 class=about-img id=belly>
            <h4>Events</h4>
            <p>Every Saturday from 21, we have Belly dancing at Bazar.</p>
        </div>
        <div class="wrapper clearfix">
            <img src=img/food.jpg alt=food-services width=222 height=167 class=about-img id=food>
            <h4>Food Services</h4>
            <p>Taste our famous pasta dish to the human price of 69 :- We offer 10% discount for take-away at our entire menu.</p>
            <p>At lunchtime you can choose from three Turkish pasta dishes or among two or three different main dishes. Ask about vegetarian options! Drinking, salad and coffee / tea included. Lunch can also be picked up.</p>
        </div>
        <div class="wrapper last clearfix">
            <img src=img/extra.jpg alt=extra-services width=222 height=167 class=about-img id=extra>
            <h4>Extra Services</h4>
            <p>We can help with everything from after work, kick-off to the birthday called with food and drink that lasts all night. Do you want more entertainment we can arrange live music and belly dancing.</p>
        </div>
    </div>
</article>

Javascript:

function home(){

    if ($(".active") == [])
    {
        return ;
    }
    else
    {
        var active = $(".active");
        active.css("display","inline-block");
        active.hide("slide",{direction:"left"},700);
        active.attr("class","vanished");

    }
}
function about(){
    if ($(".active") == [])
    {
        var hidden = $("#about");
        hidden.css("display","inline-block");
        hidden.show("slide",{direction : "right"},700);
        hidden.attr("class","active");
    }
    else
    {
        if ($("#about").attr("class") == "active")
        {
            return ;
        }
        else
        {
            var active = $(".active");
            active.css("display","inline-block");
            active.hide("slide",{direction:"left"},700);
            active.attr("class","vanished");
            var hidden = $("#about");
            hidden.css("display","inline-block");
            hidden.show("slide",{direction : "right"},700);
            hidden.attr("class","active");
        }

    }
}

CSS:

.vanished{
    display: none;
}
4

1 に答える 1

1

これは非表示/表示の前です。つまり、その時点でブロックとして表示されます。

 hidden.css("display","inline-block");

そのためにCSSを入れてから、それらの行を削除します。

于 2012-12-21T21:53:39.463 に答える