链接/按钮被禁用，直到单击另一个按钮 [英] Links/button disabled until another button is clicked
问题描述
我正在寻找一种禁用左侧所有菜单项的方法.
I am looking for a way to make all the menu items on the left be disabled.
在每个div上，都有一个执行"按钮和下一步"按钮.在单击执行按钮之前，必须禁用下一个按钮.
And on each of their divs, there is an Execute button and Next button. The next button needs to be disabled until the execute button is clicked.
除了启用下一个按钮之外，还需要启用菜单中的下一项并单击.
In addition to the next button becoming enabled, the next item in the menu needs to be enabled and clickable.
单击下一步"也将转到左侧菜单的下一项.
Clicking the Next would go to the next item on the left menu also.
脚本:
// 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/
谢谢！
推荐答案
据我对问题的了解，这需要一些准备工作才能实现.
From what I understood of the problem, this requires a few things to be in place to make this work.
为了对以下JS代码起作用，对现有HTML进行了一些先决条件更改，我在列表项中添加了ID.
Some pre-condition changes to your existing HTML for the following JS code to work, I added IDs to the list items.
<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中添加了一些前提条件，我添加了一个禁用的类以在视觉上区分状态.
And some pre-condition additions to your CSS, I added a disabled class to differentiate the states visually.
#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;
}
首先，您将要设置一个初始状态，在该状态下，除第一个列表项外，所有列表项均被禁用，而所有下一个按钮均被禁用
First you will want to set up an initial state where all of the list items are disabled except for the first one, and all of the next buttons are disabled
// 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);
为执行按钮设置一个单击处理程序，以启用关联的下一个按钮.
Set up a click handler for the execute button that enables the associated next button.
// execute click handler
$('.execute').click(function(event) {
// Get the associated next button
$(this).siblings('.next').prop('disabled', false);
});
为下一个按钮创建一个点击处理程序，以处理进入下一步的操作.
Create a click handler for the next button to handle moving on to the next step.
// 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事件以不考虑活动列表项或任何禁用的列表项.
Lastly, modify the onclick event to not consider the active or any disabled list items.
// 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/
You can try it out in the forked fiddle here: http://jsfiddle.net/UZwqx/3/
这篇关于链接/按钮被禁用，直到单击另一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
