堆栈内存溢出
  繁体   English   中英

我使用通知div时Href标签不起作用

[英]Href tag is not working when i am using notification div

 原文  2015-04-17 05:26:39  1   5    javascript/ jquery/ html/ css/ css3

问题描述

我正在创建一个通知栏，它的工作正常，但问题是进入div href标签中显示了链接但不可点击，并且我也将其用于ul，li标签中，但无法正常工作 

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#notificationLink").click(function() { $("#notificationContainer").fadeToggle(300); $("#notification_count").fadeOut("slow"); return false; }); //Document Click $(document).click(function() { //$("#notificationContainer").hide(); }); //Popup Click $("#notificationContainer").click(function() { return false }); }); </script> 
 <style> body{background-color:#dedede;font-family:arial} #nav{list-style:none;margin: 0px; padding: 0px;} #nav li { float: left; margin-right: 20px; font-size: 14px; font-weight:bold; } #notification_li{position:relative} #notificationContainer { background-color: #fff; border: 1px solid rgba(100, 100, 100, .4); -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25); overflow: visible; position: absolute; top: 30px; margin-left: -170px; width: 400px; display: none; } #notificationContainer:before { display: block; position: absolute; width: 0; height: 0; border: 10px solid black; border-color: transparent transparent white; margin-top: -20px; margin-left: 188px; } #notificationTitle { font-weight: bold; padding: 8px; font-size: 13px; background-color: #ffffff; width: 384px; border-bottom: 1px solid #dddddd; } #notificationsBody { padding: 33px 0px 0px 0px !important; min-height:300px; } #notificationFooter { background-color: #e9eaed; text-align: center; font-weight: bold; padding: 8px; font-size: 12px; border-top: 1px solid #dddddd; } #notification_count { padding: 3px 7px 3px 7px; background: #cc0000; color: #ffffff; font-weight: bold; margin-left: 77px; border-radius: 9px; position: absolute; margin-top: -11px; font-size: 11px; } #notificationul { list-style-type: none; float: left; margin-top: -33px; margin-left: -40px; /* overflow: hidden; */ height: 332px; overflow-x: auto; } #notificationul li { height:82px; border-bottom: 1px solid #dddddd; width:380px; } #liheader { float: left; color: black; margin-left: 7px; margin-top: 5px; width: 370px; } #lidesc { font-size: 12px; font-weight: normal; float: left; margin-left: 8px; margin-top: 4px; width: 360px; text-align: justify; } #notificationul li:hover { cursor: pointer; background-color: rgb(222, 222, 222); } </style> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>sample</title> </head> <body > <ul id="nav"> <li>asasas</li> <li>asasas</li><li>asasas</li><li>asasas</li> <li id="notification_li"> <span id="notification_count">3</span> <a href="#" id="notificationLink">Notifications</a> <div id="notificationContainer"> <div id="notificationTitle">Notifications</div> <div id="notificationsBody" class="notifications"> <a href="abc.html" style="position:fixed">this is sample</a> </div> <div id="notificationFooter"><a href="#">See All</a></div> </div> </li> </ul> </body> </html>

5 个解决方案

解决方案1
 0  2015-04-17 05:29:52

$("#notificationContainer").click(function()
{
//return false
});

当您向元素添加return false时，该元素的默认功能不起作用，其工作原理类似于e.preventDefault() 

 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" > $(document).ready(function() { $("#notificationLink").click(function() { $("#notificationContainer").fadeToggle(300); $("#notification_count").fadeOut("slow"); return false; }); //Document Click $(document).click(function() { //$("#notificationContainer").hide(); }); //Popup Click $("#notificationContainer").click(function() { //return false }); }); </script> 
 <style> body{background-color:#dedede;font-family:arial} #nav{list-style:none;margin: 0px; padding: 0px;} #nav li { float: left; margin-right: 20px; font-size: 14px; font-weight:bold; } #notification_li{position:relative} #notificationContainer { background-color: #fff; border: 1px solid rgba(100, 100, 100, .4); -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25); overflow: visible; position: absolute; top: 30px; margin-left: -170px; width: 400px; display: none; } #notificationContainer:before { display: block; position: absolute; width: 0; height: 0; border: 10px solid black; border-color: transparent transparent white; margin-top: -20px; margin-left: 188px; } #notificationTitle { font-weight: bold; padding: 8px; font-size: 13px; background-color: #ffffff; width: 384px; border-bottom: 1px solid #dddddd; } #notificationsBody { padding: 33px 0px 0px 0px !important; min-height:300px; } #notificationFooter { background-color: #e9eaed; text-align: center; font-weight: bold; padding: 8px; font-size: 12px; border-top: 1px solid #dddddd; } #notification_count { padding: 3px 7px 3px 7px; background: #cc0000; color: #ffffff; font-weight: bold; margin-left: 77px; border-radius: 9px; position: absolute; margin-top: -11px; font-size: 11px; } #notificationul { list-style-type: none; float: left; margin-top: -33px; margin-left: -40px; /* overflow: hidden; */ height: 332px; overflow-x: auto; } #notificationul li { height:82px; border-bottom: 1px solid #dddddd; width:380px; } #liheader { float: left; color: black; margin-left: 7px; margin-top: 5px; width: 370px; } #lidesc { font-size: 12px; font-weight: normal; float: left; margin-left: 8px; margin-top: 4px; width: 360px; text-align: justify; } #notificationul li:hover { cursor: pointer; background-color: rgb(222, 222, 222); } </style> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>sample</title> </head> <body > <ul id="nav"> <li>asasas</li> <li>asasas</li><li>asasas</li><li>asasas</li> <li id="notification_li"> <span id="notification_count">3</span> <a href="#" id="notificationLink">Notifications</a> <div id="notificationContainer"> <div id="notificationTitle">Notifications</div> <div id="notificationsBody" class="notifications"> <a href="abc.html" style="position:fixed">this is sample</a> </div> <div id="notificationFooter"><a href="#">See All</a></div> </div> </li> </ul> </body> </html>

解决方案2
 0  2015-04-17 05:31:42

您通过在此处返回false来防止点击： 

   $("#notificationContainer").click(function()
    {
    //return false
    });

解决方案3
 0  2015-04-17 05:32:57

如果返回false ; 它不会重定向到所需位置！

删除return false

功能说明 

$("#notificationContainer").click(function()
{
    //return false;
});

解决方案4
 0  2015-04-17 05:58:07

要阻止链接，可以使用preventDefault事件。 

$("#notificationContainer").on("click", function(e) {
    e.preventDefault();
});

此事件不仅适用于链接，还适用于默认情况下触发事件的提交和事件。

解决方案5
 0  2015-04-17 06:24:02

单击处理程序方法的返回“ false”是一种防止默认浏览器行为的方式，因此，如果超链接要移至另一个位置，则可以防止这种情况。 实现此目标的新方法是添加

e.preventDefault（）;

并阻止事件在DOM树中冒泡（如果当前事件处理程序未使用该事件），我们添加了

e.stopPropagation（）;

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我试图刷新div而不使用$（“ #div”）.load（window.location.href +“ #div”）刷新整个页面； 它不起作用 如果使用jquery在div标签中包含href，如何获取href url 当我使用ngFor动态创建标记时，mouseover无法正常工作 使用Div标签的location.href属性时，Eval不起作用 Href导航到Div标签 <a>使用jquery时</a>抑制锚标记<a>href</a> 单击子div时如何停止父href标签的重定向？ 我无法隐藏 div 标签 如何在没有“a”标签的情况下将“div”设为“a href”？ href标记无法正常工作
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM