문제
원하는 효과는 어떤 #Button을 클릭하는지에 따라 패널이 변경되는 것입니다. 이것은 잘 작동합니다. 내가 알아 차린 유일한 문제는 #Button을 클릭하더라도 설정 패널이 슬라이드하는 것입니다. 나는 글로벌 VAR을 갖고 이전 패널을 보관하려고했지만 전혀 작동하지 않았습니다. 나는이 문제 가이 줄에 있다고 믿는다
$("div#text div").not("#"+target).hide("slide", { direction: "right" }, 500);
감사!
CSS
#buttons {float:left;}
#buttons ul {list-style-type:none;cursor:pointer;overflow:hidden;}
#buttons ul li {height:195px;width:40px;float:left}
#buttons a {display:block;height:195px;width:40px;border:none;cursor:pointer;}
#buttons a.settings:hover, #buttons a.messages:hover, #buttons a.payments:hover {background-position: -40px 0;}
#buttons a.settings {background:url(accountsettings.png)}
#buttons a.messages {background:url(accountmessages.png)}
#buttons a.payments {background:url(accountpayments.png)}
#buttons a.panel-selected {background-position: -40px 0;}
#text{width:550px;height:199px;overflow:hidden;float:left;}
div#text div {width:550px;height:199px;float:left; margin-left:20px;}
div#text div h3 {font-family:Georgia, garamond, serif;font-size:1.8em;color:#092a43;font-weight:lighter;}
div#text div ul {list-style-type:none;float:left;}
div#text div ul li {height:195px;width:175px;float:left;padding:10px 0 0 0;}
div#text div ul li p {font-size:1.2em;color:#27608b;padding:10px 0 0 0;line-height:1.4em;}
div#text div ul li a {font-size:1.6em;padding:20px 0 0 0;}
div#settings div{ width:120px;height:140px;float:left;}
div#messages div{ width:120px;height:140px;float:left;}
div#payments div{ width:120px;height:140px;float:left;}
HTML
<div id="buttons">
<ul>
<li><a class="settings"></a></li>
<li><a class="messages"></a></li>
<li><a class="payments"></a></li>
</ul>
</div>
<div id="text">
<div id="settings">
<h3>Account Settings</h3>
<ul>
<li>
<p>test1</p>
</li>
</ul>
</div>
<div id="messages">
<h3>Messages</h3>
<ul>
<li>
<p>test2</p>
</li>
</ul>
</div>
<div id="payments">
<h3>Payments</h3>
<li>
<p>test3</p>
</li>
</ul>
</div>
</div>
jQuery
<script language="javascript" type="text/javascript">
$("div#text div:not(#settings)").hide();
$("#buttons li a.settings").addClass("panel-selected");
$("#buttons li a").click(function(){
if ($(this).hasClass("panel-selected") == false){
var target = $(this).attr("class");
$("#buttons li a:not(a." + target + ")").removeClass("panel-selected");
$(this).addClass("panel-selected");
$("#"+target).show("slide", { direction: "left" }, 500);
$("div#text div").not("#"+target).hide("slide", { direction: "right" }, 500);
}
});
</script>
해결책
나는 당신이 맞다고 생각합니다. 라인 :
$("div#text div").not("#"+target).hide("slide", { direction: "right" }, 500);
대상이 아닌 #text에서 두 개의 div를 선택하고있어 문제가 발생할 수 있습니다. 이를 피하기 위해 현재 DIV를 변수에 저장할 수 있습니다.
<script language="javascript" type="text/javascript">
$("div#text div:not(#settings)").hide();
$("#buttons li a.settings").addClass("panel-selected");
var current_div;
$("#buttons li a").click(function(){
if ($(this).hasClass("panel-selected") == false){
var target = $(this).attr("class");
$("#buttons li a:not(a." + target + ")").removeClass("panel-selected");
$(this).addClass("panel-selected");
var next_div = $('#'+target);
next_div.show("slide", { direction: "left" }, 500);
if (current_div) {
current_div.hide("slide", { direction: "right" }, 500);
}
current_div = next_div;
}
});
제휴하지 않습니다 StackOverflow