bug de diaporama jquery show

Question

L’effet souhaité est que le panneau change en fonction du bouton # sur lequel vous cliquez. Cela fonctionne bien. Le seul problème que j'ai remarqué est que, quel que soit le bouton sur lequel vous cliquez, le panneau des paramètres est celui qui glisse. J'ai essayé d'avoir une variable globale et de stocker le panneau précédent, mais cela ne fonctionnait pas du tout. Je crois que le problème réside dans cette ligne

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

Merci!

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

Je pense que vous avez raison. La ligne:

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

sélectionne les deux divs dans #text qui ne sont pas la cible, ce qui peut être à l'origine du problème. Vous voudrez peut-être stocker le div actuel dans une variable pour éviter cela:

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