jQuery交换元素 [英] jQuery Swapping Elements
问题描述
好，让我举个例子:
<head>
<script type="text/javascript">
$(document).ready(function(){
$("#options_2").hide();
$("#options_3").hide();
});
</script>
</head>
<body>
<div id="options_1">option 1</div>
<div id="options_2">option 2</div>
<div id="options_3">option 3</div>
<a href="" class="selected">choose option 1</a>
<a href="">choose option 2</a>
<a href="">choose option 3</a>
</body>
如您所见，默认情况下仅选项1是可见的，并且单击以显示选项1的链接默认情况下具有class ="selected"，向用户显示该选项当前处于选中状态.我基本上希望这样做，以便当他们单击选择选项2"时，选项1 div隐藏自身，选项2 div显示自身，然后为第二个链接提供所选的类并从图像链接中删除该类.
As you can see only option 1 is visible by default, and the link you click to show option 1 has the class="selected" by default, showing the user that that option is currently selected. I basically want it so that when they click "choose option 2" the options 1 div hides itself and the options 2 div shows itself, and then gives the second link the selected class and removes the class from the image link.
基本上，它只是使用链接和div的标签页，但是由于格式的限制，我必须在其中显示它，因此我无法使用我在网上找到的任何标签页插件.
It basically just tabs using links and divs but due to the format I have to display it in I cannot use any of the tabs plugins I have found online.
推荐答案
首先为您的链接提供一个类或ID(我已经使用了一个类)，这将使交换变得更容易
First of all give your links a class or Id (I've used a class), which will make it easier to do the swap in
<div id="options_1" class="tab" >option 1</div>
<div id="options_2" class="tab">option 2</div>
<div id="options_3" class="tab">option 3</div>
$(document).ready(function () {
var clickHandler = function (link) {
$('.tab').hide();
$('#option_' + link.data.id).show();
$('.selected').removeClass('selected');
$(this).attr('class','selected');
}
$('.link1').bind('click', {id:'1'} ,clickHandler);
$('.link2').bind('click', {id:'2'} ,clickHandler);
$('.link3').bind('click', {id:'3'} ,clickHandler);
})
这篇关于jQuery交换元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
