如何设置jquery按钮活动状态

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