jquery show slide bug

Question

Der gewünschte Effekt ist, dass sich das Panel ändert, je nachdem auf welche Taste geklickt wird. Das funktioniert gut. Das einzige Problem, das mir aufgefallen ist, ist, dass unabhängig davon, welche # Taste Sie klicken, das Einstellungsfenster das ist, auf dem Sie vorbeischauen. Ich habe versucht, eine globale Variable zu haben und das vorherige Panel zu speichern, aber das funktionierte überhaupt nicht. Ich glaube, das Problem liegt in dieser Linie

$("div#text div").not("#"+target).hide("slide", { direction: "right" }, 500); 

Vielen Dank!

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> 

Answer 1

Ich glaube, Sie richtig sind. Die Linie:

$("div#text div").not("#"+target).hide("slide", { direction: "right" }, 500); 

ist die Auswahl der zwei divs in #text, die nicht das Ziel sind, die das Problem verursachen können. Sie können die aktuelle div in einer Variablen speichern möchten, dass zu vermeiden:

<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; 
    } 
});