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

时间：2015-04-17 05:26:39

标签： 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 个答案:

答案 0 :(得分：0)

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

当你向一个元素添加return false时，那个元素的默认功能不起作用，它的工作方式类似于e.preventDefault()

＆＃13;
＆＃13; 
<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>
＆＃13; 
<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>
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

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

答案 2 :(得分：0)

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

删除return false

功能：

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

答案 3 :(得分：0)

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

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

此事件不仅适用于链接，也适用于默认情况下触发某些内容的提交和事件。

答案 4 :(得分：0)

单击处理程序方法返回“false”是一种阻止默认浏览器行为的方法，因此如果超链接想要移动到另一个位置，则会阻止此操作。实现这一目标的新方法是添加

  

e.preventDefault（）;

并阻止事件在DOM树中冒泡，如果当前事件处理程序没有使用它我们添加

  

e.stopPropagation（）;

相关问题
最新问题