Fatal编程技术网

jQuery交换元素

jquery

jQuery交换元素,jquery,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> <di

好的，让我举个例子：

<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>


$（文档）.ready（函数（）{
$（“#选项_2”）.hide（）；
$（“#选项_3”）.hide（）；
});
选择1
选择2
选择3
正如您所见，默认情况下，只有选项1可见，您单击以显示选项1的链接在默认情况下具有class=“selected”，向用户显示该选项当前处于选中状态。我基本上希望这样，当他们单击“选择选项2”时，选项1 div会自动隐藏，选项2 div会自动显示，然后为第二个链接提供所选的类，并从图像链接中删除该类

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

给定给定的格式，我会做如下操作，为每个链接分配一个id，可以理解地引用它的相关div（如“option\u 1”的“link\u 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了，但这应该是正确的：）

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

选项1
选择2
选择3
$（文档）.ready（函数（）{
var clickHandler=函数（链接）{
$（'.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）；
})
如果您以“选项1\u选择”和“开场白”的形式向链接添加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();
});
听起来你想要个手风琴

jQueryUI提供了一个：

不工作，但我不知道为什么，该死的Java，它没有显示错误。看看代码，它似乎是有意义的（尽管我最近才开始探索jQuery）…我非常感谢您，在剔除代码中的拼写错误后，它工作得非常好！太棒了-很高兴我能帮上忙：）如果每个元素使用多个类，$（this.attr（'class'，'selected'）太笨拙了，因为它删除了除'selected'之外的所有其他类。相反，使用$（this）.addClass（'selected'），所有其他类将保持不变。