3
我的問題是在我的網站上，當我加載頁面並單擊Home時，如果文章在屏幕上可見，我寫的js就可以順利地隱藏並且沒有問題但是當我點擊關於我們的鏈接時，它會顯示該文章，但是其行爲完成時會顯示錯誤的CSS位置。jquery show（）在行爲時打破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：
article{
position: absolute;
width: 550px;
height: 100%;
background-image: url("../img/blockBG.png");
z-index: 1;
left: 235px;
border-left: 1px solid #4A4A4A;
border-right-color: #7b7b7b;
border-right-style: solid;
border-right-width: thick;
padding-right: 40px;
padding-left: 40px;
text-align: center;
}
.vanished{
display:none;
}
.main-wrapper{
position:relative;
z-index:1;
width: 100%;
height: 590px;
display:block;
}
.wrapper{
border-bottom:1px solid #4A4A4A;
margin-bottom: 15px;
}
.last{
border: none;
}
h4{
color: #efefef;
text-decoration: none;
text-align: left;
font-family:'Yeseva One',cursive;
font-size: 17px;
font-weight: normal;
margin-bottom: 10px;
margin-top: 0;
line-height: 19px;
}
h1{
position: relative;
font-family:'Yeseva One',cursive;
font-size:60px;
z-index: 2;
color: white;
margin-top: 90px;
padding-bottom: 41px;
margin-bottom: 20px;
font-weight: normal;
border-bottom:1px solid #4A4A4A;
}
p{
color: #efefef;
text-decoration: none;
text-align: left;
font-family:Arial, sans-serif;
font-size: 12px;
}
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}