Jquery 链接/按钮被禁用，直到单击另一个按钮

我正在寻找一种方法，使左侧的所有菜单项被禁用

每个div上都有一个Execute按钮和Next按钮。单击“执行”按钮之前，需要禁用“下一步”按钮

除了启用“下一步”按钮外，菜单中的下一项还需要启用并可单击

单击“下一步”也会转到左侧菜单上的下一项

Javscript:

// nav
$(".nav-content").hide();
$("ul.nav li:first").addClass("active").show();
$(".nav-content:first").show();

// onclick event
$("ul.nav li").click(function() {
    $("ul.nav li").removeClass("active");
    $(this).addClass("active");
    $(".nav-content").hide();

    var activenav = $(this).find("a").attr("href");
        $(activenav).show();
        return false;
});

HTML

<div id="wrap">

    <ul class="nav">
        <li><a href="#step1"><span>1</span> ONE</a></li>
        <li><a href="#step2"><span>2</span> TWO</a></li>
        <li><a href="#step3"><span>3</span> THREE</a></li>
    </ul>

    <div class="nav-container"> 

    <div id="step1" class="nav-content"> 
        <p>ONE</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        <button class="execute" onclick="">Execute</button>
        <button class="next" onclick="">Next</button>

    </div> <!-- /step1 -->

    <div id="step2" class="nav-content"> 
        <p>TWO</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        <button class="execute" onclick="">Execute</button>
        <button class="next"  onclick="">Next</button>

    </div> <!-- /step2 -->

    <div id="step3" class="nav-content"> 
        <p>THREE</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        <button class="execute" onclick="">Execute</button>
        <button class="next"  onclick="">Next</button>

    </div> <!-- /step3 -->

我也把这个放在

---

谢谢

从我对这个问题的理解来看，这需要采取一些措施才能使这项工作顺利进行

为了使下面的JS代码正常工作，对现有HTML进行一些先决条件更改，我将ID添加到列表项中

<ul class="nav">
    <li id="nav-step1"><a href="#step1"><span>1</span> ONE</a></li>
    <li id="nav-step2"><a href="#step2"><span>2</span> TWO</a></li>
    <li id="nav-step3"><a href="#step3"><span>3</span> THREE</a></li>
    <li id="nav-step4"><a href="#step4"><span>4</span> FOUR </a></li>
    <li id="nav-step5"><a href="#step5"><span>5</span> FIVE</a></li>
    <li id="nav-step6"><a href="#step6"><span>6</span> SIX</a></li>
    <li id="nav-step7"><a href="#step7"><span>7</span> SEVEN</a></li>
    <li id="nav-step8"><a href="#step8"><span>8</span> EIGHT</a></li>
</ul>

// onclick event
$("ul.nav").on({
    click: function () {
        $("ul.nav li").removeClass("active");
        $(this).addClass("active");
        $(".nav-content").hide();

        var activenav = $(this).find("a").attr("href");
        $(activenav).show();
        return false;
    }
}, 'li:not(.disabled,.active)');

首先，您需要设置一个初始状态，在该状态下，除第一个外，所有列表项都被禁用，并且所有“下一步”按钮都被禁用

// get all list items
var listItems = $("ul.nav li");

// disable all list items
listItems.addClass('disabled');

// enable the first list item
listItems.first().removeClass('disabled');

// disable all next buttons
$('.next').prop('disabled', true);

为“执行”按钮设置一个单击处理程序，以启用关联的“下一步”按钮

// execute click handler
$('.execute').click(function(event) {
   // Get the associated next button
    $(this).siblings('.next').prop('disabled', false);
});

为“下一步”按钮创建一个单击处理程序，以处理下一步的操作

// next click handler
$('.next').click(function(event) {
    // get the associated nav item
    var navId = '#nav-' + $(this).parents('.nav-content').attr('id');
    // enable the next list item
    $(navId).next().removeClass('disabled');
    // trigger click on the next list item to step to it
    $(navId).next().trigger('click');
});

最后，修改OnCutter事件以不考虑活动列表或任何禁用列表项。

<ul class="nav">
    <li id="nav-step1"><a href="#step1"><span>1</span> ONE</a></li>
    <li id="nav-step2"><a href="#step2"><span>2</span> TWO</a></li>
    <li id="nav-step3"><a href="#step3"><span>3</span> THREE</a></li>
    <li id="nav-step4"><a href="#step4"><span>4</span> FOUR </a></li>
    <li id="nav-step5"><a href="#step5"><span>5</span> FIVE</a></li>
    <li id="nav-step6"><a href="#step6"><span>6</span> SIX</a></li>
    <li id="nav-step7"><a href="#step7"><span>7</span> SEVEN</a></li>
    <li id="nav-step8"><a href="#step8"><span>8</span> EIGHT</a></li>
</ul>

// onclick event
$("ul.nav").on({
    click: function () {
        $("ul.nav li").removeClass("active");
        $(this).addClass("active");
        $(".nav-content").hide();

        var activenav = $(this).find("a").attr("href");
        $(activenav).show();
        return false;
    }
}, 'li:not(.disabled,.active)');

---

你可以在这里用叉形小提琴试一试：

我什么都没试过，因为我不知道从哪里开始：/这太完美了！谢谢你，谢谢你如此清楚地解释了这一切，这让我感到非常高兴。我还在学习零碎的东西，这很有帮助！