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

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

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

除了启用下一个按钮之外，还需要启用菜单中的下一个项目并单击。

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

 
 
 
1 ONE
 
2 TWO
 
3 THREE
 
 
 
 
ONE
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 Execute Next 
  
 
TWO
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 Execute Next 
  
 
THREE
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 Execute Next 
  

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

根据我对这个问题的理解，这需要一些东西才能使这项工作成功。

对现有HTML进行一些前置条件更改以使以下JS代码起作用，我将ID添加到列表项中。

 
 
1 ONE
 
2 TWO
 
3 THREE
 
4 FOUR 
 
5 FIVE
 
6 SIX
 
7 SEVEN
 
8 EIGHT
  

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