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

Question

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

并且在他们的每个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 --> 

CSS

#wrap { 
    width: 100%; 
} 
#wrap ul.nav { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    width: 250px; 
    float: left; 
} 
#wrap ul.nav li { 
    min-height: 60px; 
    background-color: #2b6ed6; 
    border-bottom: 1px solid #92b4ea; 
} 
#wrap ul.nav li span { 
    position: relative; 
    vertical-align: middle; 
    margin-right: 5px; 
    font-size: 40px; 
} 
#wrap ul.nav li a { 
    color: #fff; 
    display: block; 
    padding: 20px 10px; 
    text-decoration: none; 
    line-height: 20px; 
    position: relative; 
    top: 0px; 
    font-size: 99%; 
} 
#wrap .enabled { 
} 
#wrap .disabled { 
} 
#wrap ul.nav li a:focus { 
    outline: none; 
} 
/*#wrap ul.nav li.active, */ 
#wrap ul.nav li.active a { 
    color: #000; 
} 
#wrap ul.nav li.active a:after { 
    left: 100%; 
    border: solid transparent; 
    content:" "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 
#wrap ul.nav li.active a:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-left-color: #2b6ed6; 
    border-width: 30px; 
    top: 50%; 
    margin-top: -30px; 
} 
#wrap .nav-container { 
    float: left; 
    margin: 0; 
    padding: 0; 
    width: 60%; 
    border-right: 1px solid #ccc; 
    border-bottom:1px solid #ccc; 
} 
#wrap .nav-content { 
    margin: 0; 
    padding: 0; 
} 
#wrap .nav-content p { 
    padding: 0 0 0 35px; 
} 

我也把这个在http://jsfiddle.net/XVLaX/1/

谢谢！

Answer 1

从我所了解的问题来看，这需要做一些事情来完成这项工作。

为了使下面的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> 

和一些先决条件添加到您的CSS，我添加了一个禁用类来区分视觉状态。

#csp-wrap ul.nav li.disabled a, 
#csp-wrap ul.nav li.active a { 
    cursor: default; 
} 

#csp-wrap .disabled { 
    filter: alpha(opacity=50); 
    opacity: .5; 
} 

首先你将要建立，所有列表中的项目是除了第一个禁用的初始状态，所有的下一个按钮被禁用

// 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'); 
}); 

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

// 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)'); 

你可以尝试一下在分叉的小提琴这里：http://jsfiddle.net/UZwqx/3/