如何设置jQuery按钮的激活状态

Question

我有一个使用jquery按钮的右侧导航。如果用户单击它，页面将重新加载。我需要的是，一旦页面重新加载，按钮应该显示为已选中状态。如何使用jquery按钮实现这一点？

- Sherry

Answer 1

为什么不使用jQuery UI Tab小部件？您还可以尝试使用buttonset小部件。如果这些对您不是最佳选择，则可以利用一些CSS技巧来实现。以下代码设置了两个jQuery UI按钮，当点击时保持其活动状态，从其他按钮中删除活动状态，并更新一个div，其中已被单击。HTML：

<button id="btn" class='nav'>Button 1</button>
<button id="btn2" class='nav'>Button 2</button>
<div id="data">Init....</div>

JavaScript

$(function() {

    //Variable of previously selected
    var selected = [];

    //Setup Buttons
    $('.nav').button().click(function() { 
        //Enable previous
        if(selected[0]) {
            selected.button('enable').removeClass('ui-state-active ui-state-hover'); 
        }    

        //Cache the previous
        selected = $(this);

        //Disable this and keep color attributes
        selected.button('disable').addClass('ui-state-active').removeClass('ui-state-disabled');

        //Do Normal Button Click Stuff Here
        $('#data').text(selected.text() + ' was clicked');
    });
    $('#btn').click();
});

- jyore

Answer 2

$('#mybutton').button().bind('click', function(){
    $(this).addClass('ui-state-focus');
});

这将保持按钮处于焦点状态（即根据您选择的jquery UI主题进行高亮显示）。当然，您需要从工具栏上的所有其他按钮中删除此类。

- G.A.

Answer 3

如果您的按钮跳转到新页面，则需要使用您的服务器端语言或HTML（取决于您的设置）来切换类。

如果您的按钮刷新当前页面并显示新内容，则可以使用以下代码：

.active { font-weight:bold; }

$('#button').addClass('active');

- Kokos

Answer 4

页面加载后，为按钮添加CSS类。为此类设置一些样式，以指示其已被选中。

- ShankarSangoli