我是新來的編碼和需要幫助的jQuery。我有2 <div> s（一個帶有圖像，另一個帶有一個菜單列表，其寬度均爲50％），我需要點擊其中一個菜單選項以從右側出現新的div（50％寬度）同時將其他2格寬度減少到每個25％。然後點擊相同的菜單選項隱藏新的div並恢復到原始寬度。但是，如果我點擊另一個菜單選項，而新的div是可見的，我需要它將內容更改爲特定的菜單選項內容。多個show hide撥動div滑出

如何將左側的<div>與jQuery交換？

這裏是我的工作的HTML：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <!-- SCRIPT FILES -->  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="script.js"></script>  
    <!-- CSS STYLESHEETS -->  
    <link rel="stylesheet" href="reset.css" type="text/css" /> 
    <link rel="stylesheet" href="main.css" type="text/css" />  
</head> 
<body> 
    <div id="wrapper">  
     <div id="header">   
     </div><!--header-->   
      <div id="container">   
       <div class="box-container">     
        <div class="box1">      
         <img src="images/Untitled-1.png" alt="logo">      
        </div>      
        <div class="box2">      
         <div id="nav">       
          <ul>        
           <li><a>hello!</a></li>         
           <li><a>ADVERTISING</a></li>         
           <li><a>DESIGN</a></li>         
           <li><a>ABOUT</a></li>         
           <li><a>BLOG</a></li>         
           <li><a>SHOP</a></li>         
          </ul>        
         </div><!--nav-->       
        </div><!--box2-->      
        <div class="box3">      
         <div id="ADVERTISING" class="content">ADVERTISING</div>       
         <div id="DESIGN" class="content">DESIGN</div>       
         <div id="ABOUT" class="content">ABOUT</div>       
         <div id="BLOG" class="content">BLOG</div>   
         <div id="SHOP" class="content">SHOP</div>      
        </div>      
       </div><!--box-container-->    
      </div><!--container-->   
     <div id="footer">   
     </div><!--footer-->   
    </div><!-- wrapper-->   
</body> 
</html>

這裏有一個工作的jsfiddle與風格：http://jsfiddle.net/YcphY/6/

來源

2012-12-21 user1892312

這是一個HTTP的jsfiddle（或大於window.width（），使其在所有屏幕尺寸的工作。）：/ /jsfiddle.net/YcphY/5/我試着從這裏複製和粘貼很多其他的例子，但我不知所措。 – user1892312

您的JSFiddle將無法正常工作，因爲您嘗試使用相對URL加載資源，即使它們位於錯誤的域中。爲了真正利用JSFiddle的有用性，您應該將HTML/JS/CSS拆分爲各自的面板。 – Jasper

你可以做到這一點，沒有js btw –

對於初學者來說，here's a method that ties the below examples of how to do this into the animation you're after：

$(function() { 
    $("#nav").delegate("li","click", function() { 
    var newDiv = $(".box3 .content").eq($(this).index()-1); 
    newDiv.siblings().hide().end(); // hide the others 
    if(newDiv.is(":visible")) { 
     // if shown, fade it out, when the fade finishes, slide everything back 
     newDiv.fadeOut(function() { 
     $(".box3").hide(); 
     $(".box1, .box2").animate({ width: "50%" }); 
     }); 
    } else { 
     // if not shown, then slide over space, then fade in 
     $(".box1, .box2").animate({ width: "25%" }, function() { 
     $(".box3").show(); 
     newDiv.fadeIn("fast"); 
     }); 
    } 
    });   
});

鑑於當前的CSS你可以這樣做：

$(function() { 
    $("#nav").delegate("li a","click", function() { 
     $(".box3").show(); 
     $("#" + $(this).text()).show().siblings().hide(); 
    });   
});

Here's a working example，儘管您可以看到CSS需要一點工作才能使其達到100％。我雖然提出了一些更改：給你的鏈接和容器匹配ID，像這樣：

<li><a id="ad">ADVERTISING</a></li> 

<div id="ad-container" class="content">ADVERTISING</div>

然後JS可以是：

$(function() { 
    $("#nav").delegate("li a","click", function() { 
     $(".box3").show(); 
     $("#" + this.id + "-container").show().siblings().hide(); 
    });   
});

Here's a working example of that ...它可以讓你改變文字的會不會擔心後來的JS打破。另一種替代方法是，如果在所有情況下鏈接的數量與<div>一致，即使由於「你好！」而存在偏移量，也可以使用<li>的.index()來關閉列表中鏈接的索引。鏈接。

Here's an example of an index approach與您現有的HTML：

$(function() { 
    $("#nav").delegate("li","click", function() { 
     $(".box3").show(); 
     $(".box3 .content").hide().eq($(this).index()-1).show(); 
    });   
});

來源

2012-12-21 20:54:45

哇！那看起來很棒。我會嘗試。 – user1892312

非常感謝。 – user1892312

我將頂級jsfiddle中的所有代碼複製到我的文件中，但似乎不起作用。我錯過了什麼嗎？ – user1892312

我認爲jQuery的animate功能可能會使用你的。

你需要做的是將一個隱藏的div放在窗口外面添加到你的HTML中（或者可以使用jquery在document.ready事件上動態添加它，如果你喜歡的話）以及使用上面提到的動畫函數將其滑入和滑出並將其綁定到菜單項的點擊功能。

示例代碼

$(document).ready(function(){ 
    $('#slide').click(function(){ 
    var hidden = $('.hidden'); 
    if (hidden.hasClass('visible')){ 
     hidden.animate({"left":"-1000px"}, "slow"); 
     hidden.removeClass('visible'); 
    } else { 
     hidden.animate({"left":"0px"}, "slow"); 
     hidden.addClass('visible'); 
    } 
    }); 
});

說明

在我們綁定代碼到click事件與id「滑動」的元件的上面的代碼。一旦元素被點擊，代碼就會被啓動。我們檢查.hidden是否有一個名爲「visible」的css類。如果沒有，我們就讓隱藏的div滑動，如果它有可見的類，則將其滑出。

工作小提琴

這裏是你

一些指針

在隱藏div的CSS記得指定的z-index比目前的左側面板更大的工作JSFiddle。
在隱藏div的CSS記得設置position到absolute和left圍繞-1200px

來源

2012-12-21 21:15:32 Amyth

感謝您的信息Amyth – user1892312

歡迎您，我已更新答案並添加了幾個指針。 – Amyth

謝謝。很多食物在這裏很好的回答傢伙。 – user1892312

多個show hide撥動div滑出

回答

示例代碼

工作小提琴

一些指針

相關問題