jqueryのショースライドバグ

Question

パネルでは、上のクリックされ#buttonに応じて変更するために、

所望の効果があります。これが正常に動作します。私が気づいた唯一の問題は、どんなあなたがクリック#button、設定パネルがスライドすることにより1ではないということです。私はグローバルな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>

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