Question

我有一系列类似于制表符的按钮，但是使用了JQuery加载。

当前选择的按钮我希望拥有不同的CLASS。当选择另一个元素时，我希望前一个元素的类返回到它的前一个类。

设置为所有按钮的CLASS是.TABlink，它在加载脚本中用作它们的选择器。管理每个链接所起作用的CLASS是在周围的范围内。

概述

    <span class="TABbase"><a href="?accommodation" class="TABlink" onclick="return false">Accommodation</a></span> 

    <span class="TABbase"><a href="<?travel" class="TABlink" onclick="return false">Travel</a></span>

有什么想法吗？

非凡

Answer 1

所选课程的设置很简单：

//bind each 'button' so that on click, it is styled to be 'selected'
$('.TABlink').click(function(){select($(this))});

//Applies the selected style to the element
function select(el){
    $(el).addClass('.TABselected');
}

我可以想到两种取消选择的方法：

从所有元素中删除所选类，然后将其设置为当前所选的“按钮”。
```
function deselectAll(){
    $('.TABlink').removeClass('.TABselected');
}
```
这是fiddle showing this in action。

跟踪所选的最后一个按钮，并在单击其他按钮时取消选择该按钮。 ~~对于简单的应用程序来说，这可能太多了。~~
更新我仍然关注闭包所以我不确定如何在不维护和检查全局变量的情况下执行此操作，但我今天再次拍摄它并且我认为我已经有了不错的东西。你可以查看at this fiddle。这是代码：

var select = (function(){
//variable to store last selected 'button'
var selected;

return function (el){
        //selected is still accessible because of closure
        if(selected){
            $(selected).removeClass('TABselected');
        }
        $(el).addClass('TABselected');
        selected = el; //save this as the last selected
      }
})();

//bind each 'button' so that on click, it is styled to be 'selected'
$('.TABlink').click(function(){select($(this))});

JQuery Select功能用于突出显示当前元素

1 个答案: