jquery Diavorführung bug

Question

Der gewünschte Effekt ist für die Platte je nach zu ändern, die #Button Sie auf klicken. Dies funktioniert gut. Das einzige Problem, das ich bemerkt habe ist, dass, egal was #Button Sie klicken, wird das Einstellungsfenster der ist, der durch gleitet. Ich habe versucht, eine globale var haben und die i.Vj. Platte zu speichern, aber das war gar nicht funktioniert. Ich glaube, das Problem in dieser Linie liegt

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

Danke!

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 Zeile:

$("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 kann. 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;
    }
});