Php 禁用未选择的选项卡

我有一个选项卡菜单，这是我的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>

试试这个：

单击后，如何解除单击事件的绑定

<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>

HTML 工作演示

或

jQuery Woking演示

新建js->按钮单击转到下一个选项卡

jQuery

---

正在进行演示

您面临的问题是什么。？请使用JS fiddle:那么您有什么问题？@Vivek-我想禁用所有其他选项卡，以便您进行响应，我进行了编辑，但我仍然面临相同的问题。@KiranRs-您的JS控制台中有任何警告/错误吗？请尝试更新版本。现在，它的目标是使用jquery的bind/unbind版本的实际链接。希望能有所帮助。我在每个选项卡中都有按钮，我只想在单击当前选项卡上的按钮时启用下一个选项卡…显示您的html哪些有按钮，哪些按钮将打开哪个选项卡？？它的工作伙伴，但我在每个选项卡中都有一个按钮，当用户单击当前选项卡时，我想转到下一个选项卡。

<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>

<<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>

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

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

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

<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>