html - html 无法点击 div 中的链接

问题描述

这是我的代码，我把链接放在下面：

<a href="www.google.com">LINK</a>

此源的此输出如下：

我有链接，但点击时它不起作用，我把它放在 div 通知中，你可以检查下面的完整源，也许问题出在 css 配置中，但我无法弄清楚我的问题，你能解决它吗？

  <html>
    <head>
        <title>Create a Facebook like Notifications Window using jQuery and CSS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <style>
            ul {
                display:block;
                /*background:#45619D;*/
                list-style:none;
                margin:0;
    			margin-left:500px;
                padding:12px 10px;
                height:21px;
    			width : 45px;
            }
            ul li {
                float:left;
                font:13px helvetica;
                font-weight:bold;
                margin:3px 0;
            }
            
            #noti_Container {
                position:relative;
    			
    			
            }
           
            /* A CIRCLE LIKE BUTTON IN THE TOP MENU. */
            #noti_Button {  /*pengaturan lingkaran*/
                width:22px;
                height:22px;
                line-height:22px;
                border-radius:50%;
                -moz-border-radius:50%; 
                -webkit-border-radius:50%;
                background:red;
                margin:-3px 10px 0 10px;
                cursor:pointer;
            }
    		
    		#noti_buttons{
    		cursor:pointer;
    		}
    		
            
            /* THE POPULAR RED NOTIFICATIONS COUNTER. */
            #noti_Counter {  /*pengaturan hitung jumlah notif yang ada*/
                display:block;
                position:absolute;
                background:#E1141E;
                color:#FFF;
                font-size:12px;
                font-weight:normal;
                padding:1px 3px;
                margin:-8px 0 0 25px;
                border-radius:2px;
                -moz-border-radius:2px; 
                -webkit-border-radius:2px;
                z-index:1;
            }
            
            /* THE NOTIFICAIONS WINDOW. THIS REMAINS HIDDEN WHEN THE PAGE LOADS. */
            #notifications {   /*pengaturan kotak notification*/
                display:none;
                width:400px;
                position:absolute;
                top:42px;
                left:-350px;
                background:#FFF;
                border:solid 1px rgba(100, 100, 100, .20);
                -webkit-box-shadow:0 3px 8px rgba(0, 0, 0, .20);
                z-index: 1;
            }
    		
            /* AN ARROW LIKE STRUCTURE JUST OVER THE NOTIFICATIONS WINDOW */
            #notifications:before {     /*pengaturan warna arrow*/    
                content: '';
                display:block;
                width:0;
                height:0;
                color:transparent;
                border:10px solid #CCC;
                border-color:transparent transparent #e8e8e8;
                margin-top:-20px;
                margin-left:355px;
            }
            
            h3 {
                display:block;
                color:#333; 
                background:#FFF;
                font-weight:bold;
                font-size:13px;    
                padding:8px;
                margin:0;
                border-bottom:solid 1px rgba(100, 100, 100, .30);
            }
            
             .seeAll {
                background:#F6F7F8;
                padding:8px;
                font-size:12px;
                font-weight:bold;
                border-top:solid 1px rgba(100, 100, 100, .30);
                text-align:center;
            }
             .seeAll a {
                color:#3b5998;
            }
             .seeAll a:hover {
                background:#F6F7F8;
                color:#3b5998;
                text-decoration:underline;
            }
        </style>
    </head>
    <body style="margin:0;padding:0;">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


       
            <ul>
               
                <li id="noti_Container">
    			
                    <div id="noti_Counter"></div>   <!--SHOW NOTIFICATIONS COUNT.-->
                    
                    <!--A CIRCLE LIKE BUTTON TO DISPLAY NOTIFICATION DROPDOWN.-->
                    <!--<div id="noti_Button"></div>--> 
    				<img id="noti_Buttons" src="bell.png"></img>

                    <!--THE NOTIFICAIONS DROPDOWN BOX.-->
                    <div id="notifications">
    					<a href="www.google.com">LINK</a>
                        <h3>Notifications</h3>
    					<?php
    					$user_name = "root";
    					$password = "";
    					$database = "wordpress";
    					$host_name = "localhost"; 
    					 
    					$koneksi = mysqli_connect($host_name, $user_name, $password , $database);
    					
    					$result = mysqli_query($koneksi,"SELECT wp_comments.comment_content,wp_posts.post_name FROM wp_comments INNER JOIN 
    					wp_posts ON wp_comments.comment_post_id = wp_posts.id AND wp_comments.user_id = 3 AND wp_comments.comment_approved = 1");
    					
    					while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){ ?>
    						<div style="padding:20px 0px 20px 0px;border-bottom:solid 1px #e8e8e8">
    							<div style="padding-left:10px;">
    								<?php
    									echo "your comment has been approved </br>".$row['comment_content'];?><a style="position:absolute;z-index:1" href="www.google.com" target="_top">see more link</a></br>
    							</div>
    						</div>
    					<?php } ?>
    					
    					<div class="seeAll"><a href="www.google.com">See All</a></div>
    		</div>	
    		</li>
    		</ul>
      
    		
                        
    					
                    		
                
    	
    	
    	
    </body>
    <script>
        $(document).ready(function () {

            // ANIMATEDLY DISPLAY THE NOTIFICATION COUNTER.
            $('#noti_Counter')
                .css({ opacity: 0 })
                .text('7')      // ADD DYNAMIC VALUE (YOU CAN EXTRACT DATA FROM DATABASE OR XML).
                .css({ top: '-10px' })
                .animate({ top: '-2px', opacity: 1 }, 500);

            $('#noti_Buttons').click(function () {

                // TOGGLE (SHOW OR HIDE) NOTIFICATION WINDOW.
                $('#notifications').fadeToggle('fast', 'linear', function () {
                    if ($('#notifications').is(':hidden')) {
                        
                    }
                    // CHANGE BACKGROUND COLOR OF THE BUTTON.
                    else $('#noti_Buttons').css('filter', 'opacity(70%)');
                });

                $('#noti_Counter').fadeOut('slow');     // HIDE THE COUNTER.

                return false;
            });

            // HIDE NOTIFICATIONS WHEN CLICKED ANYWHERE ON THE PAGE.
            $(document).click(function () {
                $('#notifications').hide();

                // CHECK IF NOTIFICATION COUNTER IS HIDDEN.
                if ($('#noti_Counter').is(':hidden')) {
                    // CHANGE BACKGROUND COLOR OF THE BUTTON.
                    $('#noti_Buttons').css('filter', 'opacity(100%)');
                }
            });

            $('#notifications').click(function () {
                return false;       // DO NOTHING WHEN CONTAINER IS CLICKED.
            });
    		
    		$("img").hover(function(){
            $(this).css("filter", "opacity(30%)");
            }, function(){
            $(this).css("filter", "opacity(100%)");
        });
        });
    </script>
    </html>

标签： htmlcss

html - html 无法点击 div 中的链接

问题描述

解决方案

推荐阅读