禁用未选择的选项卡

Question

我有一个标签菜单，这是我的 html 代码，

<li class="active"><a href="#tab1">Tab 1</a></li>
            <li><a class="icon_accept" href="#tab2">Tab with icon</a></li>
            <li><a href="#tab3">Long name for the last tab</a></li>
        </ul>
    </div>
    <div id="tabs_content_container">
        <div id="tab1" class="tab_content" style="display: block;">
            <p>content 1</p>
        </div>
        <div id="tab2" class="tab_content">
            <p>content 2</p>
        </div>
        <div id="tab3" class="tab_content">
            <p>content 3</p>
        </div>

但是当我选择一个选项卡时，我想禁用所有其他选项卡，这意味着当一个选项卡处于活动状态时，没有人可以单击任何其他选项卡菜单！

这是我的 java 脚本。

<script type="text/javascript">

$(document).ready(function(){
    $("#tabs li").click(function() {
        //    First remove class "active" from currently active tab
        $("#tabs li").removeClass('active');

        //    Now add class "active" to the selected/clicked tab
        $(this).addClass("active");

        //    Hide all tab content
        $(".tab_content").hide();

        //    Here we get the href value of the selected tab
        var selected_tab = $(this).find("a").attr("href");

        //    Show the selected tab content
        $(selected_tab).fadeIn();

        //    At the end, we add return false so that the click on the link is not executed
        return false;
    });
});

</script>

Answer 1

<script type="text/javascript">

$(document).ready(function(){
    $("#tabs li").click(function() {
        //    First remove class "active" from currently active tab
        $("#tabs li").removeClass('active');

        $("#tabs li").find('a').unbind('click', false);
        //OR $("#tabs li a").unbind('click', false);

        //    Now add class "active" to the selected/clicked tab
        $(this).addClass("active");
        $(this).find('a').bind('click', false);

        //    Hide all tab content
        $(".tab_content").hide();

        //    Here we get the href value of the selected tab
        var selected_tab = $(this).find("a").attr("href");

        //    Show the selected tab content
        $(selected_tab).fadeIn();

        //    At the end, we add return false so that the click on the link is not executed
        return false;
    });
});

    </script>

Answer 2

点击后这个unbindclick事件怎么样

<script type="text/javascript">

$(document).ready(function(){
    $("#tabs li").click(function() {
        //    First remove class "active" from currently active tab
        $("#tabs li").removeClass('active');

        //    Now add class "active" to the selected/clicked tab
        $(this).addClass("active");

        //    Hide all tab content
        $(".tab_content").hide();

        //    Here we get the href value of the selected tab
        var selected_tab = $(this).find("a").attr("href");

        //    Show the selected tab content
        $(selected_tab).fadeIn();

        //    At the end, we add return false so that the click on the link is not executed

 $("#tabs li").unbind("click"); 
        return false;
    });
});

</script>

Answer 3

试试这个：

<script type="text/javascript">

    $(document).ready(function(){
        $("#tabs li").click(function() {
            //    First remove class "active" from currently active tab
            $("#tabs li").removeClass('active');

            $("#tabs li").find('a').unbind('click', false);
            //OR $("#tabs li a").unbind('click', false);

            //    Now add class "active" to the selected/clicked tab
            $(this).addClass("active");
            $(this).find('a').bind('click', false);

            //    Hide all tab content
            $(".tab_content").hide();

            //    Here we get the href value of the selected tab
            var selected_tab = $(this).find("a").attr("href");

            //    Show the selected tab content
            $(selected_tab).fadeIn();

            //    At the end, we add return false so that the click on the link is not executed
            return false;
        });
    });

    </script>

Answer 4

HTML

<<div id="tabs">
<ul>
    <li><a href="#tabs-1">Nunc tincidunt</a>

    </li>
    <li><a href="#tabs-2">Proin dolor</a>

    </li>
    <li><a href="#tabs-3">Aenean lacinia</a>

    </li>
</ul>
<div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollici\ tristique tempus lectus.</p>
    <input type="button" value="1" id="s1" class="tush" />
</div>
<div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet f kh fwjh</p>
    <input type="button" value="2" id="s2" class="tush" />
</div>
<div id="tabs-3">
    <p id="hi">Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi n.</p>
    <input type="button" value="2" id="s3" class="tush" />
</div>

jQuery

$(document).ready(function () {
    $('#tabs').tabs({
        collapsible: true,
        active: 10
    });
    $("#tabs li").click(function () {
        $("#tabs li a").unbind("click");
        return false;
    });
});

工作演示http://jsfiddle.net/cse_tushar/N2dn5/

或

jQuery

$(document).ready(function () {
    $('#tabs').tabs({
        collapsible: true,
        active: 10,
        activate: function (event, ui) {
            $("#tabs li a").unbind("click");
        }
    });
});

沃金演示http://jsfiddle.net/cse_tushar/YZjJa/

新建 js--> 按钮点击进入下一个标签

jQuery

$(document).ready(function () {
    $('#tabs').tabs({
        collapsible: true,
        active: 10,
        activate: function (event, ui) {
            $("#tabs li a").unbind("click");
        },
        beforeActivate: function (event, ui) {
            $("#tabs li a").bind("click");
        }
    });
    $('.tush').click(function () {
        var tab_index = $('#tabs ul li.ui-state-active').attr('aria-controls');
        var lastChar = tab_index.substr(tab_index.length - 1)
        $('#tabs').tabs({
            active: lastChar
        });
        return false;
    });
});

工作演示http://jsfiddle.net/cse_tushar/YZjJa/1/