مسج علة عرض الشرائح

Question

والتأثير المطلوب هو لوحة لتغيير اعتمادا على #button النقر على. هذا يعمل بشكل جيد. المشكلة الوحيدة لقد لاحظت هي أنه مهما #button النقر فوق، لوحة الإعدادات هي التي تنزلق من قبل. حاولت أن يكون لها فار العالمي وتخزين لوحة سابق، ولكن هذا لم يكن يعمل على الإطلاق. وأعتقد أن المشكلة تكمن في هذا الخط

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

ومسج

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

ويتم اختيار عناصر div اثنين في #text التي ليست هدفا، والذي قد يكون سبب المشكلة. قد تحتاج إلى تخزين شعبة الحالي في متغير لتجنب ما يلي:

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