如何设置jQuery按钮的活动状态 [英] how to set jquery button active state

问题描述

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

I have this right navigation that uses the jquery button. If the user clicks it, the page will load. What I need is once the page reload, the button should show that it was selected.

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

How do I do this using the jquery button?

推荐答案

为什么不使用jQuery UI Tab小部件? 您还可以尝试使用按钮集小部件吗?

Why don't you use the jQuery UI Tab widget? You could also try using the buttonset widget?

如果这些都不是您的最佳选择，那么您可以使用一些CSS东西来发挥自己的优势.以下代码设置了两个jQuery UI按钮，这些按钮将在单击时保持其活动状态，从另一个按钮中删除活动状态，并更新已单击的div.

If those are not optimal for you, then you can use some CSS stuff to your advantage. The following code sets up two jQuery UI buttons that will keep their active state when clicked, remove the active state from the other, and update a div with which has been clicked.

HTML

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

JavaScript

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

这篇关于如何设置jQuery按钮的活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！