jQuery交换元素

好吧，让我举个例子：

  $(document).ready(function(){ $("#options_2").hide(); $("#options_3").hide(); });    
option 1
 
option 2
 
option 3
 choose option 1 choose option 2 choose option 3  

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

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

Answer 1

首先给你的链接一个类或Id（我已经使用了一个类），这将使交换更容易

 
option 1
 
option 2
 
option 3
 $(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); }) 

Answer 2

鉴于您给出的格式我会做如下的事情，为每个链接分配一个id，可以理解地引用它的相关div（如“option_1”的“link_1”）并使用以下jQuery：

 $('a#link_1').click(function() { $(this).attr("class", "selected"); $(this).siblings('a').removeClass("selected"); $('div#option_1').show(); $('div#option_1').siblings('div').hide(); }); $('a#link_2').click(function() { $(this).attr("class", "selected"); $(this).siblings('a').removeClass("selected"); $('div#option_2').show(); $('div#option_2').siblings('div').hide(); }); $('a#link_3').click(function() { $(this).attr("class", "selected"); $(this).siblings('a').removeClass("selected"); $('div#option_3').show(); $('div#option_3').siblings('div').hide(); }); 

我有一段时间没有完成jQuery，但那应该是正确的:)

Answer 3

如果您在表单’options_1_select’和类’开启者’中为链接添加ID，则可以自助。 然后，您可以为所有链接分配单个事件处理程序：

 $('a.opener').click(function() { // mark current link as selected and unmark all others $(this) .addClass('selected') .siblings('a').removeClass('selected'); // find a div to show, and hide its siblings $('#' + $(this).attr('id').substring(0, 9)) .show() .siblings('div').hide(); }); 

Answer 4

听起来你想要一架手风琴。

jQuery UI提供了一个： http ： //jqueryui.com/demos/accordion/