![](/img/trans.png)
[英]JavaScript on click ul li a href - prevent default not working
[英]href of “a” tag not working in ul li
我有一個可切換的側邊欄,里面有一些鏈接,還有一些j-query代碼,它為鏈接啟用了活動類,一切都按我的預期工作,但鏈接不起作用
這是我的HTML代碼:
<div id="wrapper" class="toggled-2">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav nav-pills nav-stacked" id="menu">
<li class="active">
<a href="#" class="a-properties">
<asp:Literal runat="server" Text="<%$ Resources:Dashboard,Home%>" />
<span class="fa-stack fa-lg pull-left"><i class="fa fa-dashboard fa-stack-1x " style="float: left;"></i></span>
</a>
<ul class="nav-pills nav-stacked" style="list-style-type: none;">
<li>
<a href="https://www.google.com/" class="a-properties subMenu">
<span class="glyphicon glyphicon-record icon-style" aria-hidden="true"></span>
<asp:Literal runat="server" Text="<%$ Resources:Dashboard,kartabl%>" />
<span class="fa-stack fa-lg pull-left"></span>
</a>
</li>
<li>
<a href="https://www.google.com/" class="a-properties subMenu">
<span class="glyphicon glyphicon-record icon-style" aria-hidden="true"></span>
<asp:Literal runat="server" Text="<%$ Resources:Dashboard,virayesh_mshakhasat%>" />
<span class="fa-stack fa-lg pull-left"></span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
這是我的j查詢代碼:
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$("#menu-toggle-2").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled-2");
$('#menu ul').hide();
});
$("#menu a").click(function() {
if (!$(this).parent().hasClass("active") && !$(this).hasClass("subMenu")) {
$(".active").removeClass("active");
$(this).parent().addClass("active");
} else {
return false; //this prevents flicker
}
});
$(".subMenu").click(function() {
if (!$(this).hasClass("sub-active")) {
$(".sub-active").removeClass("sub-active");
$(this).parent().addClass("sub-active");
} else {
return false; //this prevents flicker
}
});
有人說java-script麻煩了,但是我不知道如何解決! 注意:“ a”標簽的css屬性設置為:
display: block;
width: 100%;
height: 100%;
使用的主要原因:
return false; //this prevents flicker
上面的代碼是停止默認事件並阻止它執行任何操作。 刪除該作品。 為了避免出現問題,請僅將事件處理程序附加到具有href="#"
<a>
標記上。 就像是:
$('a[href="#"]').click(function () {
// Your code here...
return false;
});
最后,我建議您不要使用return false
,而應使用:
$('a[href="#"]').click(function (e) {
// This is safer version of return false and also doesn't affect the links.
e.preventDefault();
// Your code here...
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.