jQuery交换元素

Question

jQuery交换元素

5

好的，让我举个例子：

<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，然后将第二个链接赋予selected class并从图像链接中删除该class。

它基本上只是使用链接和div进行选项卡，但由于我必须以特定格式显示它，因此我无法使用任何在线找到的选项卡插件。

- zuk1

4个回答

2

根据您提供的格式，我会做以下操作：为每个链接分配一个可理解地引用其关联div的id（例如，“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了，但应该没问题 :)

- Wayne Austin

无法正常工作，但我不确定原因，该死的Java，它没有显示错误。看代码似乎是有道理的（尽管我最近才开始探索jQuery）... - zuk1

1

如果您在链接中添加形式为“options_1_select”的ID和类“opener”，则可以自助处理。然后，您可以将单个事件处理程序分配给所有链接：

$('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();
});

- Damir

1

看起来你想要一个手风琴。

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

- ajma

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matt Goddard · Accepted Answer

首先给你的链接添加一个类或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);
})