我有3个div，2个设置为none，1个可见。
在下面我有3个链接，每个链接对应一个div，当点击其中一个链接时，我需要它淡入与之相关的div，如果有意义则淡出当前活动的那个？ / p>
我添加了一个小提琴，因为你可以看到'导演'目前正在显示，我希望能够点击底部的一个链接，例如帐户，并且它可以淡化导演div并淡入帐户DIV ....
答案 0 :(得分：0)
如果您更改了类，则必须在包含div和触发链接的标题attr上添加“fader”类（下面的示例）：
<div class="fader" title="directors">
<a href="#" class="fader" title="directors">directors</a>
CSS成为：
div.fader {display:none;}
脚本可以如下：
$(document).ready(function(){
// On link click, the corresponding div needs to fade into the team-profile and the other
// needs to fade out...
$('div.fader[title="directors"]').show();
$('a.fader').click(function (e) {
var t = $(this).attr('title');
$('div.fader').hide('slow');
$('div.fader[title="' + t + '"]').show('slow');
e.preventDefault();
return false;
});
});
在你的jsfiddle上工作和测试。 完整的HTML源代码如下：
<div class="fader" title="directors">
<h2>Our Directors</h2>
<ul class="team">
<li>
<a href="#">
<img src="http://www.placehold.it/218x108" class="fl"/>
<div class="information">
<p class="block-left">
<span class="name-title">Name</span>
<span class="name">Thomas O'Donoghue</span>
<span class="job-title">Job Title</span>
<span class="job">Managing Director</span>
</p>
<p class="block-right">
<span class="biography-title">Biography</span>
Thomas is the Managing Director of Website FX, and ha...
</p>
</div>
</a>
</li>
<li>
<a href="#">
<img src="http://www.placehold.it/218x108" class="fl"/>
<div class="information">
<p class="block-left">
<span class="name-title">Name</span>
<span class="name">Thomas O'Donoghue</span>
<span class="job-title">Job Title</span>
<span class="job">Managing Director</span>
</p>
<p class="block-right">
<span class="biography-title">Biography</span>
Thomas is the Managing Director of Website FX, and ha...
</p>
</div>
</a>
</li>
<li>
<a href="#">
<img src="http://www.placehold.it/218x108" class="fl"/>
<div class="information">
<p class="block-left">
<span class="name-title">Name</span>
<span class="name">Thomas O'Donoghue</span>
<span class="job-title">Job Title</span>
<span class="job">Managing Director</span>
</p>
<p class="block-right">
<span class="biography-title">Biography</span>
Thomas is the Managing Director of Website FX, and ha...
</p>
</div>
</a>
</li>
</ul>
</div>
<div class="fader" title="sales">
<h2>Our Sales Team</h2>
<ul class="team">
<li>
<a href="#">
<img src="http://www.placehold.it/218x108" class="fl"/>
<div class="information">
<p class="block-left">
<span class="name-title">Name</span>
<span class="name">Thomas O'Donoghue</span>
<span class="job-title">Job Title</span>
<span class="job">Managing Director</span>
</p>
<p class="block-right">
<span class="biography-title">Biography</span>
Thomas is the Managing Director of Website FX, and ha...
</p>
</div>
</a>
</li>
<li>
<a href="#">
<img src="http://www.placehold.it/218x108" class="fl"/>
<div class="information">
<p class="block-left">
<span class="name-title">Name</span>
<span class="name">Thomas O'Donoghue</span>
<span class="job-title">Job Title</span>
<span class="job">Managing Director</span>
</p>
<p class="block-right">
<span class="biography-title">Biography</span>
Thomas is the Managing Director of Website FX, and ha...
</p>
</div>
</a>
</li>
</ul>
</div>
<div class="fader" title="accounts">
<h2>Our Accounts Team</h2>
<ul class="team">
<li>
<a href="#">
<img src="http://www.placehold.it/218x108" class="fl"/>
<div class="information">
<p class="block-left">
<span class="name-title">Name</span>
<span class="name">Thomas O'Donoghue</span>
<span class="job-title">Job Title</span>
<span class="job">Managing Director</span>
</p>
<p class="block-right">
<span class="biography-title">Biography</span>
Thomas is the Managing Director of Website FX, and ha...
</p>
</div>
</a>
</li>
<li>
<a href="#">
<img src="http://www.placehold.it/218x108" class="fl"/>
<div class="information">
<p class="block-left">
<span class="name-title">Name</span>
<span class="name">Thomas O'Donoghue</span>
<span class="job-title">Job Title</span>
<span class="job">Managing Director</span>
</p>
<p class="block-right">
<span class="biography-title">Biography</span>
Thomas is the Managing Director of Website FX, and ha...
</p>
</div>
</a>
</li>
</ul>
</div>
<div>
<br /><br />
<a href="#" class="fader" title="accounts">Accounts</a><br />
<a href="#" class="fader" title="sales">sales</a><br />
<a href="#" class="fader" title="directors">directors</a>
希望这会有所帮助。 皮特