我有这些标签但是可以让其他非活动标签无法点击吗?
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-tabs" style="display:inline-flex">
<li class="active"><a href="#step1" data-toggle="tab">Step 1</a></li>
<li><a href="#step2" data-toggle="tab">Step 2</a></li>
<li><a href="#step3" data-toggle="tab">Step 3</a></li>
<li><a href="#step4" data-toggle="tab">Step 4</a></li>
<li><a href="#step5" data-toggle="tab">Step 5</a></li>
<li><a href="#step6" data-toggle="tab">Step 6</a></li>
<li><a href="#step7" data-toggle="tab">Step 7</a></li>
</ul>
</div>
</div>
答案 0 :(得分:1)
您可以使用:not()
CSS选择器和pointer-events: none;
来禁用点击事件。
li:not(.active) a{
pointer-events: none;
}
&#13;
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-tabs" style="display:inline-flex">
<li class="active"><a href="#step1" data-toggle="tab">Step 1</a></li>
<li><a href="#step2" data-toggle="tab">Step 2</a></li>
<li><a href="#step3" data-toggle="tab">Step 3</a></li>
<li><a href="#step4" data-toggle="tab">Step 4</a></li>
<li><a href="#step5" data-toggle="tab">Step 5</a></li>
<li><a href="#step6" data-toggle="tab">Step 6</a></li>
<li><a href="#step7" data-toggle="tab">Step 7</a></li>
</ul>
</div>
</div>
&#13;
答案 1 :(得分:0)
只需将此类添加到要禁用点击的标签页即可。 这是css。
.avoid-clicks {
pointer-events: none;
}
答案 2 :(得分:0)
全部禁用它们并启用活动的
$('li').prop('disabled',true);
$('.active').prop('disabled',false);
答案 3 :(得分:0)
要使用jquery动态禁用链接,请尝试以下操作:
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<a href="https://google.com/">Go to google</a>
&#13;
答案 4 :(得分:0)
为了获得最佳效果,您可以:
disabled
类添加到li
元素data-toggle
a
属性
醇>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-tabs" style="display:inline-flex">
<li class="active"><a href="#step0" data-toggle="tab">Step 0</a></li>
<li><a href="#step1" data-toggle="tab">Step 1</a></li>
<li class="disabled"><a href="#step2" >Step 2</a></li>
<li class="disabled"><a href="#step3" >Step 3</a></li>
<li class="disabled"><a href="#step4" >Step 4</a></li>
</ul>
</div>
</div>
答案 5 :(得分:0)
您可以将以下规则添加到非活动项目中,以使其无法点击。这在以下帖子中提出:
.disabled, li:not(.active) {
pointer-events: none;
opacity: 0.4;
}
ul {
display: inline-flex;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
height: 1em;
line-height: 1em;
}
li {
width: 14%;
height: 2em;
margin: 0.1%;
line-height: 2em;
background-color: #FFF;
border: thin solid #777;
text-align: center;
}
li a {
display: block;
width: 100%:
height: 100%;
text-decoration: none;
}
li a, li a:active, li:visited {
color: #48A;
}
li a:hover {
color: #5AC;
text-decoration: underline;
}
.active {
background-color: #FFF;
font-weight: bold;
border: thin solid #DDD;
}
.disabled, li:not(.active) {
background-color: #AAA;
pointer-events: none;
opacity: 0.4;
}
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-tabs">
<li class="active"><a href="#step1" data-toggle="tab">Step 1</a></li>
<li><a href="#step2" data-toggle="tab">Step 2</a></li>
<li><a href="#step3" data-toggle="tab">Step 3</a></li>
<li><a href="#step4" data-toggle="tab">Step 4</a></li>
<li><a href="#step5" data-toggle="tab">Step 5</a></li>
<li><a href="#step6" data-toggle="tab">Step 6</a></li>
<li><a href="#step7" data-toggle="tab">Step 7</a></li>
</ul>
</div>
</div>