jQuery交换元素

zuk*_*uk1 5 jquery

好的,让我举个例子:

<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>
Run Code Online (Sandbox Code Playgroud)

正如您所看到的,默认情况下只有选项1可见,并且您单击以显示选项1的链接默认情况下具有class ="selected",向用户显示当前选择了该选项.我基本上想要它,以便当他们点击"选择选项2"时,选项1 div隐藏自己,选项2 div显示自己,然后给第二个链接选择的类,并从图像链接中删除该类.

它基本上只是使用链接和div的标签,但由于我必须显示它的格式我不能使用我在网上找到的任何标签插件.

Mat*_*ard 12

首先给你的链接一个类或Id(我已经使用了一个类),这将使更容易进行交换

<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);
})
Run Code Online (Sandbox Code Playgroud)