Question

我正在实施通知。我将整个后端与前端集成在一起。

我将通知HTML视为：

<span id="notification_count" style="display: none"></span>
            <a href="#" id="notificationLink"><img alt="" src="assets/img/notification-icon.jpg"></a>
            <div id="notificationContainer">
            <div id="notificationTitle">Notifications</div>
            <div id="notificationsBody">
                <table style="text-align: center;">
                    <tr>
                        <a href="www.google.com">123</a>
                    </tr>
                    <hr>
                    <tr>
                        <a href="#">123</a>
                    </tr>
                    <hr>
                    <tr>
                        <a href="#">123</a>
                    </tr>
                    <hr>
                    <tr>
                        <a href="#">123</a>
                    </tr>
                    <hr>
                    <tr>
                        <a href="#">123</a>
                    </tr>
                    <hr>
                    <tr>
                        <a href="#">123</a>
                    </tr>
                    <hr>
                </table>
            </div>
            <div id="notificationFooter"></div>
            </div>

和CSS：

    #nav{list-style:none;margin: 0px;padding: 0px;}
#nav li {
float: left;
margin-right: 20px;
font-size: 14px;
font-weight:bold;
}
#nav li a{color:#333333;text-decoration:none}
#nav li a:hover{color:#006699;text-decoration:none}
#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;
color : #ffffff;
position: absolute;
top: 30px;
margin-left: -170px;
width: 400px;
z-index: -1;
display: none; // Enable this after jquery implementation 
}
// Popup Arrow
#notificationContainer:before {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
border: 10px solid black;
border-color: transparent transparent white;
margin-top: -20px;
margin-left: 188px;
}
#notificationTitle
{
text-align: center;
font-weight: bold;
padding: 8px;
font-size: 12px;
background-color: #ffffff;
border-bottom: 1px solid #dddddd;
color: #555;
}
#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: 25px;
border-radius: 9px;
-moz-border-radius: 9px; 
-webkit-border-radius: 9px;
position: absolute;
margin-top: -11px;
font-size: 11px;
}

但notificationBody中的a标签不起作用。点击这些标签时，没有任何事情发生。请告诉我们是什么问题。 z索引可能存在一些问题。请帮帮我。

Answer 1

您的HTML无效，可能是您遇到问题的原因。

您不能将链接作为表格行的子项。只有表格单元格可以去那里。

使用a validator并修正错误。

Answer 2

您可以使用onclick事件打开链接

＆＃13;

<a href="http://www.google.com" onclick="window.open(this.href,'_self')">123</a>

＆＃13;

锚标记链接无效

2 个答案: