伙计们我是jQuery的新手......请帮助我学习这个。我想扩展div（#center）取宽度：点击100％，然后在我的情况下关闭其他2个div（#left和#right）。 请有人帮我解决这个问题。最重要的是，过渡应该是迅速而不是立刻。回复表示赞赏。而且它不是lyk我先尝试一下。我尝试使用点击功能使其成为现实.bt dint按照需要工作
body {
width: 100%;
height: auto;
}
#taskDetails {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#description {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#details {
float: left;
width: 900px;
margin: 0 auto;
height: auto;
border: 2px solid #a1a1a1;
display: inline-block;
}
#left {
float: left;
width: 250px;
margin: 0 auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#center {
width: 370px;
float: left;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
margin-left: 9px;
}
#right {
float: right;
width: 250px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#head {
top: 0;
width: 100%;
height: 30px;
background: #8CBF26;
border-radius: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
padding: 0 10px;
border-radius: 8px;
display: block;
width: 60px;
height: 25px;
border: 2px solid #a1a1a1;
background-color: #00ABA9;
text-decoration: none;
}
.heading {
padding: 5px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="abc.css">
<script href="abc.js"></script>
</head>
<body>
<div id="main">
<div id="taskDetails">
<div id="head">
<div class="heading">FORM</div>
</div>
<div id="formTab">
<div id="form">
</div>
</div>
</div>
<div id="description">
<div id="head">
<ul>
<li><a href="#home">Tab 1</a></li>
<li><a href="#news">Tab 2</a></li>
<li><a href="#contact">Tab 3</a></li>
</ul>
</div>
<div id="content">
<div class="rte">
</div>
<div class="text">
</div>
</div>
</div>
<div id="details">
<div id="left">
<div id="head">
<div class="heading">Projects</div>
</div>
<div class="data">
</div>
</div>
<div id="center">
<div id="head">
<div class="heading">Details</div>
</div>
<div class="data">
</div>
</div>
<div id="right">
<div id="head">
<div class="heading">Tab 3</div>
</div>
<div class="data">
</div>
</div>
</div>
</div>
</body>
答案 0 :(得分：0)
您可以将此示例用于＆＃34; tab2＆＃34;
$("#tab2").click(function () {
$("#center").css("width", "100%");
$("#left").fadeOut("slow");
$("#right").fadeOut("slow");
});
检查我的小提琴：http://jsfiddle.net/u87z1m3n/1/
为了能够选择它们，请将ID放入其中：
<li id="tab1"><a href="#home">Tab 1</a>
</li>
<li id="tab2"><a href="#news">Tab 2</a>
</li>
<li id="tab3"><a href="#contact">Tab 3</a>
</li>
示例非常粗糙，因为代码需要更多精炼...... 但我认为它可以回答你的问题......
答案 1 :(得分：0)
研究下面的例子。如果您有任何问题，请告诉我。
$("#head li").click(function () {
$("#center, #left, #right").eq($(this).index()).css("width", "100%");
$("#center, #left, #right").not($(this)).hide();
});body {
width: 100%;
height: auto;
}
.current {
width: 100%
}
#taskDetails {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#description {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#details {
float: left;
width: 900px;
margin: 0 auto;
height: auto;
border: 2px solid #a1a1a1;
display: inline-block;
}
#left {
float: left;
width: 250px;
margin: 0 auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#center {
width: 370px;
float: left;
height: 200px;
border: 2px solid #a1a1a1;
background: red;
margin-left: 9px;
}
#right {
float: right;
width: 250px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#head {
top: 0;
width: 100%;
height: 30px;
background: #8CBF26;
border-radius: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
padding: 0 10px;
border-radius: 8px;
display: block;
width: 60px;
height: 25px;
border: 2px solid #a1a1a1;
background-color: #00ABA9;
text-decoration: none;
}
.heading {
padding: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="taskDetails">
<div id="head">
<div class="heading">FORM</div>
</div>
<div id="formTab">
<div id="form">
</div>
</div>
</div>
<div id="description">
<div id="head">
<ul>
<li><a href="#home">Tab 1</a></li>
<li><a href="#news">Tab 2</a></li>
<li><a href="#contact">Tab 3</a></li>
</ul>
</div>
<div id="content">
<div class="rte">
</div>
<div class="text">
</div>
</div>
</div>
<div id="details">
<div id="left">
<div id="head">
<div class="heading">Projects</div>
</div>
<div class="data">
</div>
</div>
<div id="center">
<div id="head">
<div class="heading">Details</div>
</div>
<div class="data">
</div>
</div>
<div id="right">
<div id="head">
<div class="heading">Tab 3</div>
</div>
<div class="data">
</div>
</div>
</div>
</div>
答案 2 :(得分：0)
这里有 CodePen demo ，显示以下所有内容的最终结果。请仔细阅读，以便您了解该过程并了解所发生的一切。
首先，您的HTML需要大量清理。您将head称为ID，但在整个代码中多次使用它。如果您不止一次使用选择器，则应该是一个类。我在HTML和CSS中更改了它。
<强> HTML
<div id="main">
<div id="taskDetails">
<div class="head">
<div class="heading">FORM</div>
</div>
<div id="formTab">
<div id="form"></div>
</div>
</div>
<div id="description">
<div class="head">
<ul>
<li><a href="#home">Tab 1</a></li>
<li><a href="#news">Tab 2</a></li>
<li><a href="#contact">Tab 3</a></li>
</ul>
</div>
<div id="content">
<div class="rte"></div>
<div class="text"></div>
</div>
</div>
<div id="details">
<div id="left">
<div class="head">
<div class="heading">Projects</div>
</div>
<div class="data"></div>
</div>
<div id="center">
<div class="head">
<div class="heading">Details</div>
</div>
<div class="data"></div>
</div>
<div id="right">
<div class="head">
<div class="heading">Tab 3</div>
</div>
<div class="data"></div>
</div>
</div>
</div>
接下来，在您的CSS中，您没有正确设置容器的宽度，因此添加width:100%之类的内容并没有做任何事情，因为没有最大宽度可以填充。我把它添加到你的风格中。请记住，我还更新了将head ID更改为类的标记。
此外，我从您left，right和center div中删除了浮点数，因为这会从文档流中删除块，这可能会导致有趣的行为。相反，我将它们更改为display:inline-block并设置相对于容器的宽度。
最后，我在末尾添加了一个.wide类，它将设置center div的宽度。
<强> CSS
body {
margin:0;
padding:0;
width: 100%;
height: auto;
}
#main {
width:100%;
}
#taskDetails {
width:auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#description {
width:auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#details {
width:100%;
margin: 0 auto;
height: auto;
border: 2px solid #a1a1a1;
display: inline-block;
}
#left {
display:inline-block;
margin:0;
padding:0;
width:20%;
margin: 0 auto;
height: 200px;
border: 1px solid #a1a1a1;
background: #dddddd;
}
#center {
display:inline-block;
margin:0;
padding:0;
width:50%;
height: 200px;
border: 1px solid #a1a1a1;
background: red;
}
#right {
display:inline-block;
margin:0;
padding:0;
width:20%;
height: 200px;
border: 1px solid #a1a1a1;
background: #dddddd;
}
.head {
top: 0;
width: 100%;
height: 30px;
background: #8CBF26;
border-radius: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
padding: 0 10px;
border-radius: 8px;
display: block;
width: 60px;
height: 25px;
border: 2px solid #a1a1a1;
background-color: #00ABA9;
text-decoration: none;
}
.heading {
padding: 5px;
}
.wide {
width:100% !important;
transition:.5s;
}
现在，可以使用jQuery完成此操作，因此请务必在HTML的head中添加脚本。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
jQuery脚本非常简单，它做了三件事：
1.当您单击任何选项卡按钮时，它将隐藏#left和#right div。
2. #center div扩展到容器的100％。
3.当您再次单击选项卡时，它将缩小#center div并将其他两个返回。
<强>的jQuery
$(".head ul li").click(function() {
$("#left, #right").animate({width:"toggle"});
$("#center").toggleClass('wide');
})
我在两个调用中都使用了toggle因为它提供了一个相当不错的动画，而没有让你的代码具体化。它还可以处理添加或删除类，因此如果您只想在每次单击时添加或删除该类，则您的脚本可以保持简单。
如果你想要更复杂的东西，你肯定希望看到JavaScript而不是jQuery，就像上面提到的@Katana314一样。他们有两个不同的东西，所以一定要了解两者之间的区别。