我有 5 个链接,我想将active
类添加到特定链接。
例如
<div class="w3-sidebar w3-bar-block w3-collapse w3-card-2 w3-animate-left" style="width: 200px; padding-top: 50px;" id="mySidebar">
<button type="button" class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close ×</button>
<a href="#" class="w3-bar-item w3-button">Create User</a>
<a href="#" class="w3-bar-item w3-button">Security</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
<a href="#" class="w3-bar-item w3-button">Link 4</a>
<a href="#" class="w3-bar-item w3-button">Link 5</a>
</div>
如果我想
active
类添加到第二个链接(安全性(。我该如何添加。
$(document).ready(function () {
//ADD Active in SideNav bar
$('.w3-sidebar a').click(function (e) {
e.preventDefault();
$('.w3-sidebar a').removeClass('active');
$(this).addClass('active');
})
});
我尝试了上面的代码。但问题是。当页面重新加载时。该活动未出现。
您必须使用 jquery 选择第二个元素,并在每次页面加载时应用active
类。
$(document).ready(function() {
$(".w3-button:eq(2)").addClass("active");
$('.w3-sidebar a').click(function(e) {
e.preventDefault();
$('.w3-sidebar a').removeClass('active');
$(this).addClass('active');
});
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w3-sidebar w3-bar-block w3-collapse w3-card-2 w3-animate-left" style="width: 200px; padding-top: 50px;" id="mySidebar">
<button type="button" class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close ×</button>
<a href="#" class="w3-bar-item w3-button">Create User</a>
<a href="#" class="w3-bar-item w3-button">Security</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
<a href="#" class="w3-bar-item w3-button">Link 4</a>
<a href="#" class="w3-bar-item w3-button">Link 5</a>
</div>
你必须写下面的代码
$('.w3-sidebar a:nth-child(2)').addClass('active')
查看 JSFIDDLE
https://jsfiddle.net/9sncqbb9/
很少
有方法可以做到这一点。如果您有有关当前页面的信息,只需执行以下操作:
<div class="w3-sidebar w3-bar-block w3-collapse w3-card-2 w3-animate-left" style="width: 200px; padding-top: 50px;" id="mySidebar">
<button type="button" class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close ×</button>
<a href="createUser" class="w3-bar-item w3-button">Create User</a>
<a href="security" class="w3-bar-item w3-button">Security</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
<a href="#" class="w3-bar-item w3-button">Link 4</a>
<a href="#" class="w3-bar-item w3-button">Link 5</a>
</div>
然后在您的 JS 代码中:
//currentPageName = 'security';
$('a[href="'+currentPageName+'"]).addClass('active');