我是编码的新手，需要jQuery的帮助。我有2个<div> S（一个带有图像，另一个带有菜单列表，均为50％），我需要能够单击菜单选项之一，以使新的Div（50％宽度）从右侧出现同时将其他2个divs宽度减少到25％。然后单击相同的菜单选项以隐藏新的Div并将其恢复到原始宽度。但是，如果我在可见新div时单击另一个菜单选项，我需要将内容更改为特定菜单选项。
如何用jQuery交换左侧<div>？
这是我正在使用的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/
对于初学者，这是一种将下面的示例绑定到您所追求的动画中的示例：
$(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();
});
});
这是一个工作示例，尽管您可以看到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();
});
});
这是一个工作的示例...它使您可以随意更改文本，而不必担心JS以后会破裂。另一个替代方法是使用<li>的.index()在列表中的链接索引，如果在所有情况下与<div> S一致的链接数，即使由于" Hello！"而有偏移，链接。
这是您当前HTML的索引方法的示例：
$(function() {
$("#nav").delegate("li","click", function() {
$(".box3").show();
$(".box3 .content").hide().eq($(this).index()-1).show();
});
});
我认为jQuery的动画功能可能对您有用。
您需要做的是将隐藏的div放在窗口中添加到您的HTML中（如果您愿意的话，也可以使用document.ready事件上的jQuery动态添加它），然后使用上述动画函数来使用上述动画函数向内和向外滑动并将其绑定到菜单项的点击功能。
示例代码
$(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');
}
});
});
说明
在上面的代码中，我们将代码绑定到带有id"幻灯片"的元素的click事件。单击元素后，代码将启动。我们检查.hidden是否有一个CSS类，称为"可见"。如果不是，我们将隐藏的Div动画为滑入。如果它具有可见的类，则将其滑出。
工作小提琴
这是一个适合您的JSFIDDLE
一些指针
- 在隐藏的Div的CSS中，请记住指定一个大于当前左图的z索引。
- 在隐藏的Div的CSS中，请记住将
position设置为absolute，将left设置为-1200px（或大于Windows.width.width（）以使其在所有屏幕尺寸上工作。）
）