Question

我有这个使用jquery按钮的正确导航。如果用户单击它，页面将加载。我需要的是一旦页面重新加载，按钮应显示它已被选中。

如何使用jquery按钮执行此操作？

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();
});

Answer 2

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

这使它保持聚焦状态（即，根据您选择的jquery ui主题突出显示）。当然，您需要从工具栏上的所有其他按钮中删除此类。

Answer 3

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

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

.active { font-weight:bold; }

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

Answer 4

页面加载后，将一个css类添加到按钮。为这个类设置一些样式，表明它已被选中。

如何设置jquery按钮活动状态

4 个答案: