jQuery的激活DIV显示/隐藏

jQuery的激活DIV显示/隐藏

 javascript jquery我是相当新的jQuery和JavaScript的，并很努力，我相信有一个更简单的方法来的函数的项目。下面是我做的一个简化版本： HTML

<a class="link1" href="#">Link 1</a>
<a class="link2" href="#">Link 2</a>
<a class="link3" href="#">Link 3</a>
<div id="div1" style="display: hidden;">Content</div>
<div id="div2" style="display: hidden;">Content</div>
<div id="div3" style="display: hidden;">Content</div>

jQuery的

$(".link1").click(function(){
$("#div2, #div3").hide();
$("#div1").show();
$(".link2, .link3").removeClass("active");
$(".link1").addClass("active");
});
$(".link2").click(function(){
$("#div1, #div3").hide();
$("#div2").show();
$(".link1, .link3").removeClass("active");
$(".link2").addClass("active");
});
$(".link3").click(function(){
$("#div1, #div2").hide();
$("#div3").show();
$(".link1, .link2").removeClass("active");
$(".link3").addClass("active");
});

所以基本上每一个环节是隐藏了非对应的div，即使他们不一定明显，也消除了对即使他们不适用（以确保它们被删除）其他环节的活动类，然后显示相应的div，并增加了有源类的链接。我想知道如果有一个更简单的方法来创建这个函数 CodeGo.net，而不必隐藏所有其他的div并删除所有活动类，以确保只不过是一个我想看到的显示。非常感谢您的帮助，您可以提供！本文地址 ：CodeGo.net/6839803/ ------------------------------------------------------------------------------------------------------------------------- 1.你可以改变你的HTML一点，使事情变得更容易，例如：

<a class="link" href="#" rel="div1">Link 1</a>
<a class="link" href="#" rel="div2">Link 2</a>
<a class="link" href="#" rel="div3">Link 3</a>
<div class="content" id="div1">Content 1</div>
<div class="content" id="div2">Content 2</div>
<div class="content" id="div3">Content 3</div>

和一个简单的函数来执行我的想法，你想要的：

$('.link').click(function(e){
e.preventDefault();
var content = $(this).attr('rel');
$('.active').removeClass('active');
$(this).addClass('active');
$('.content').hide();
$('#'+content).show();
});

看到这里演示的代码还解释（上演示2.如果你组你喜欢[/code]

<div id="links">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div id="content">
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>

并添加CSS

#content div {
display: none;
}

然后，你可以做

$('#links').children().click(function() {
// Get the index of the link that was clicked on
var index = $('#links').children().index(this);
// Hide all content except that corresponding to the clicked link
$('#content').children().hide().eq(index).show();
// Remove active class from all links except that which was clicked
$('#links').children().removeClass('active');
$(this).addClass('active');
});

现在你不需要在你的HTML中，所有这些不同的ID和类，以及更少的代码重复。 :)JSFiddle：3.试试下面的例子。请做必要的更改。[/code]

Jquery:
function showonlyone(thechosenone) {
$('div[name|="newboxes"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}

HTML：

<table>
<tr>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
</div>
<div name="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
</div>
<div name="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
</div>
<div name="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>
</td>
</tr>
</table>