Question

好的，让我举一个例子：

<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显示自己，然后给第二个链接选择的类，并从图像链接中删除该类。

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

Answer 1

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

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/

jQuery交换元素

4 个答案: