jquery show slide bug

Question

クリックするボタンによって、パネルが変更されます。これは正常に動作します。私が気づいた唯一の問題は、＃ボタンをクリックしても設定パネルがスライドすることです。私は、グローバル変数を持って、前のパネルを格納しようとしましたが、それはまったく動作しませんでした。私は問題がこの行にあると信じています

$("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> 

Answer 1

私はあなたが正しいだと思います。行：

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

問題を引き起こすことができる標的ないの#textに2つの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; 
    } 
});