的HTML

Question

当点击子元素以反映当前选择的子元素时，我需要一些添加/删除父元素类的方法。在这种情况下，选项卡方案中的UL父级和LI子级。我需要一种方法来标记UL上的当前选项卡，这样我就可以在UL上设置背景精灵的样式;因为造型我的LI的背景在这种情况下不适用于图形。

我是一个jQuery / Javascript / DOM新手，但能够为初学者拼凑一个丑陋的解决方案，

HTML

<!-- tabs -->
      <ul class="tabs currenttab-info">
        <li id="tab-info" class="info"><strong><a href="#">Information</a></strong></li>
        <li id="tab-write" class="write"><strong><a href="#">Write Feedback</a></strong></li>
        <li id="tab-read" class="read"><strong><a href="#">Read Feedback</a></strong></li>
      </ul>

Javascript

    // send '.currenttab-x' to '.tabs' and remove '.currenttab-y' + '.currenttab-z'

    // when LI #tab-X is clicked ...
$( '#tab-info' ).click(function() {
        // ... find the UL and remove the first possible conflicting class
    $('.tabs').removeClass("currenttab-read");
        // ... find the UL and remove the other possible conflicting class
    $('.tabs').removeClass("currenttab-write");
        // ... find the UL and add the class for this LI
    $('.tabs').addClass("currenttab-info");  
});

    // ... repeat ...
$( '#tab-write' ).click(function() {
    $('.tabs').removeClass("currenttab-info");
    $('.tabs').removeClass("currenttab-read");
    $('.tabs').addClass("currenttab-write");  
});

$( '#tab-read' ).click(function() {
    $('.tabs').removeClass("currenttab-info");
    $('.tabs').removeClass("currenttab-write");
    $('.tabs').addClass("currenttab-read");  
});

这实际上似乎有效，但这是一个摸索的解决方案，我确定有更好的方法。你们中的一些jQuery忍者会知道如何将这个功能放在一起非常优雅，任何帮助吗？

此外，我想添加到这一点，以便点击的LI也被赋予一个类来显示它被选中，而其他LI被剥离任何这样的类。我已经为UL做了同样的事情;我可以看到如何用我的笨拙方法做到这一点，但它将意味着越来越多的混乱代码行。如果你的改进还包括一种改变LI的类的方法我会很感激

仅供参考：我正在使用jQuery Tools Tabs，因此我展示了更多jQuery，但只有我引用的那些内容似乎相关。

Answer 1

的HTML

如果您不将id用于其他用途，我会将其删除li。

<ul class="tabs currenttab-info">
    <li class="info"><strong><a href="#">Information</a></strong></li>
    <li class="write"><strong><a href="#">Write Feedback</a></strong></li>
    <li class="read"><strong><a href="#">Read Feedback</a></strong></li>
</ul>

的jQuery

$('.tabs li').click(function() {

    var $li = $(this);

    $li.addClass('current').siblings().removeClass('current'); // adds a current class to the clicked li

    var $ul = $li.parent();

    $ul.removeClass("currenttab-info currenttab-read currenttab-write")
       .addClass("currenttab-" + this.class );  // assuming li only holds one class e.g. class="write"
});

Answer 2

你可以这样做：

$('.tabs > li').click(function() {
    $(this).parent().attr('class', 'tabs').addClass('currenttab-'+$(this).attr('class'));
});

Answer 3

$("UL.tabs LI A").bind('click',function(e){ //bind a Click-Event handler to the Links
  var $target = $(e.target); //the jQuery-Object-Reference to the clicked target ( $(this) should work too)
  var LIClasses =  $target.parents('LI').attr('class'); //A list of all Classes the parrent LI of the clicked Link have

  $target
   .parents('UL.tabs')
     //now you can remove and add classes to the parent "UL.tabs"
     .removeClass('...')
     .addClass('...')
     .end() //after .end() the chain for .parents-match is broken
   .parents('LI')
     //here you can add and remove classes from the parent LI
     .removeClass('...')
     .addClass('...')
     .end() //after .end() the chain for .parents-match is broken
   ;
});

注意：

jQuery是可链接的。
.removeClass()和.addClass()可以同时使用空格进行多个类名（如.removeClass('class1 class2')）

完整的解决方案：

var relevantClasses = ['read','write','info'];

$("UL.tabs LI A").bind('click',function(e){
  var $target = $(e.target);

  var relevantClass = '';
  for( var cl in $target.parents('LI').attr('class').split(' ') )
    if( jQuery.inArray(relevantClasses , cl) > -1 ){
      relevantClass = cl;
      break;
    }

  $target
   .parents('UL.tabs')
     .removeClass(jQuery.map(relevantClasses , function (className) { return 'currenttab-' + className; }).join(' '))
     .addClass('currenttab-'+relevantClass )
     .end()
   ;
});

Answer 4

首先，您可以链接方法调用...

$('.tabs').removeClass("currenttab-read currenttab-write").addClass("currenttab-write");

这会使代码更清晰......

编辑：我会在小提琴http://jsfiddle.net/JvtAz/

中尝试这些事情

单击子项时需要干净的jQuery来更改父级

4 个答案:

的HTML

的jQuery