CSS链接无法点击

Question

我正在处理叠加菜单，并且我有两个菜单，其中一个在隐藏叠加层时显示，另一个在叠加层中显示（另一个在您点击汉堡并激活叠加时隐藏）。我的问题是，当你点击链接（我试图把www.google.com放在href中）时，没有任何反应，只是像href中的“＃”那样刷新它自己。 在我覆盖我也有社会联系的一部分，确保链接的工作，但在菜单链接非是（不是经典或覆盖菜单链接不工作）

$(document).ready(function() { 
 
    $(".button a").click(function() { 
 
    $(".overlay").fadeToggle(200); 
 
    $(this).toggleClass('btn-open').toggleClass('btn-close'); 
 
    }); 
 
}); 
 
$('.overlay').on('click', function() { 
 
    $(".overlay").fadeToggle(200); 
 
    $(".button a").toggleClass('btn-open').toggleClass('btn-close'); 
 
    open = false; 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #fff; 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 12px; 
 
} 
 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    text-decoration: none; 
 
    list-style: none; 
 
} 
 
li { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
nav { 
 
    text-align: center; 
 
    width: 100%; 
 
    position: relative; 
 
    height: auto; 
 
    overflow: hidden; 
 
    background: none; 
 
} 
 
nav ul { 
 
    text-align: center; 
 
    z-index: 999; 
 
} 
 
nav ul li { 
 
    display: inline-block; 
 
    z-index: 999; 
 
} 
 
nav ul li a { 
 
    color: #333; 
 
    display: inline-block; 
 
    padding: 1em 3em; 
 
    text-decoration: none; 
 
    border-bottom: 2px solid #fff; 
 
    transition-property: all .2s linear 0s; 
 
    -moz-transition: all .2s linear 0s; 
 
    -webkit-transition: all .2s linear 0s; 
 
    -o-transition: all .2s linear 0s; 
 
    font-size: 16px; 
 
    z-index: 999; 
 
} 
 
nav ul li a:hover { 
 
    color: #34B484; 
 
} 
 
/*styling open close button*/ 
 

 
.button { 
 
    display: inline; 
 
    position: absolute; 
 
    right: 50px; 
 
    top: 6px; 
 
    z-index: 999; 
 
    font-size: 30px; 
 
} 
 
.button a { 
 
    text-decoration: none; 
 
} 
 
.btn-open:after { 
 
    color: #333; 
 
    content: "\f0c9"; 
 
    font-family: "FontAwesome"; 
 
    transition-property: all .2s linear 0s; 
 
    -moz-transition: all .2s linear 0s; 
 
    -webkit-transition: all .2s linear 0s; 
 
    -o-transition: all .2s linear 0s; 
 
} 
 
.btn-open:hover:after { 
 
    color: #34B484; 
 
} 
 
.btn-close:after { 
 
    color: #fff; 
 
    content: "\f00d"; 
 
    font-family: "FontAwesome"; 
 
    transition-property: all .2s linear 0s; 
 
    -moz-transition: all .2s linear 0s; 
 
    -webkit-transition: all .2s linear 0s; 
 
    -o-transition: all .2s linear 0s; 
 
} 
 
.btn-close:hover:after { 
 
    color: #34B484; 
 
} 
 
/*overlay*/ 
 

 
.overlay { 
 
    display: none; 
 
    position: fixed; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: #333; 
 
    overflow: auto; 
 
    z-index: 99; 
 
} 
 
.wrap { 
 
    color: #e9e9e9; 
 
    text-align: center; 
 
    max-width: 90%; 
 
    margin: 0 auto; 
 
} 
 
.wrap ul.wrap-nav { 
 
    border-bottom: 1px solid #575757; 
 
    text-transform: capitalize; 
 
    padding: 150px 0px 100px; 
 
    z-index: 999; 
 
} 
 
.wrap ul.wrap-nav li { 
 
    font-size: 20px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 24%; 
 
    position: relative; 
 
    z-index: 999; 
 
} 
 
.wrap ul.wrap-nav li a { 
 
    color: #34B484; 
 
    display: block; 
 
    padding: 8px 0; 
 
    text-decoration: none; 
 
    transition-property: all .2s linear 0s; 
 
    -moz-transition: all .2s linear 0s; 
 
    -webkit-transition: all .2s linear 0s; 
 
    -o-transition: all .2s linear 0s; 
 
    z-index: 999; 
 
} 
 
.wrap ul.wrap-nav li a:hover { 
 
    color: #f0f0f0; 
 
} 
 
.wrap ul.wrap-nav ul { 
 
    padding: 20px 0; 
 
    z-index: 999; 
 
} 
 
.wrap ul.wrap-nav ul li { 
 
    display: block; 
 
    font-size: 13px; 
 
    width: 100%; 
 
    color: #e9e9e9; 
 
    z-index: 999; 
 
} 
 
.wrap ul.wrap-nav ul li a { 
 
    color: #f0f0f0; 
 
    z-index: 999; 
 
} 
 
.wrap ul.wrap-nav ul li a:hover { 
 
    color: #34B484; 
 
} 
 
.social { 
 
    font-size: 25px; 
 
    padding: 20px; 
 
} 
 
.social p { 
 
    margin: 0; 
 
    padding: 20px 0 5px 0; 
 
    line-height: 30px; 
 
    font-size: 13px; 
 
} 
 
.social p a { 
 
    color: #34B484; 
 
} 
 
.social-icon { 
 
    width: 80px; 
 
    height: 50px; 
 
    background: #e9e9e9; 
 
    color: #333; 
 
    display: inline-block; 
 
    margin: 0 20px; 
 
    transition-property: all .2s linear 0s; 
 
    -moz-transition: all .2s linear 0s; 
 
    -webkit-transition: all .2s linear 0s; 
 
    -o-transition: all .2s linear 0s; 
 
} 
 
.social-icon:hover { 
 
    background: #34B484; 
 
    color: #f0f0f0; 
 
} 
 
.social-icon i { 
 
    margin-top: 12px; 
 
} 
 
@media screen and (max-width: 48em) { 
 
    .wrap ul.wrap-nav > li { 
 
    width: 100%; 
 
    padding: 20px 0; 
 
    border-bottom: 1px solid #575757; 
 
    } 
 
    .wrap ul.wrap-nav { 
 
    padding: 30px 0px 0px; 
 
    } 
 
    nav ul { 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    } 
 
    .social { 
 
    color: #c1c1c1; 
 
    font-size: 25px; 
 
    padding: 15px 0; 
 
    } 
 
    .social-icon { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #fff; 
 
    color: #333; 
 
    display: block; 
 
    margin: 5px 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a href="http://facebook.com">Company</a> 
 
    </li> 
 
    <li><a href="#">Services</a> 
 
    </li> 
 
    <li><a href="#">Social</a> 
 
    </li> 
 
    <li><a href="#">Contact</a> 
 
    </li> 
 
    </ul> 
 
    <div class="button"> 
 
    <a class="btn-open" href="#"></a> 
 
    </div> 
 
</nav> 
 

 
<div class="overlay"> 
 
    <div class="wrap"> 
 
    <ul class="wrap-nav"> 
 
     <li><a href="#">Company</a> 
 
     <ul> 
 
      <li><a href="#">About</a> 
 
      </li> 
 
      <li><a href="#">Blog</a> 
 
      </li> 
 
      <li><a href="#">Workplace</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Services</a> 
 
     <ul> 
 
      <li><a href="https://www.google.hr/">Web Design</a> 
 
      </li> 
 
      <li><a href="#">Consultanct</a> 
 
      </li> 
 
      <li><a href="#">Products</a> 
 
      </li> 
 
      <li><a href="#">Centers</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Social</a> 
 
     <ul> 
 
      <li><a href="#">Facebook</a> 
 
      </li> 
 
      <li><a href="#">Twitter</a> 
 
      </li> 
 
      <li><a href="#">Google Plus</a> 
 
      </li> 
 
      <li><a href="#">LinkedIn</a> 
 
      </li> 
 
      <li><a href="#">WhatsApp</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     <ul> 
 
      <li><a href="#">Address</a> 
 
      </li> 
 
      <li><a href="#">Phone</a> 
 
      </li> 
 
      <li><a href="#">Email</a> 
 
      </li> 
 
      <li><a href="#">Map</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 

 
    <div class="social"> 
 
     <a href="http://mario-loncarek.from.hr/"> 
 
     <div class="social-icon"><i class="fa fa-facebook"></i> 
 
     </div> 
 
     </a> 
 
     <a href="#"> 
 
     <div class="social-icon"><i class="fa fa-twitter"></i> 
 
     </div> 
 
     </a> 
 
     <a href="#"> 
 
     <div class="social-icon"><i class="fa fa-codepen"></i> 
 
     </div> 
 
     </a> 
 
     <a href="#"> 
 
     <div class="social-icon"><i class="fa fa-behance"></i> 
 
     </div> 
 
     </a> 
 
     <a href="#"> 
 
     <div class="social-icon"><i class="fa fa-dribbble"></i> 
 
     </div> 
 
     </a> 
 
     <p>From: Zagreb, Croatia 
 
     <br>Site: <a href="http://mario-loncarek.from.hr/">mario-loncarek.from.hr</a> 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

您正在使用的在线集成开发环境阻止您将页面导向到外部URL（到当前项目）。

控制台显示，同时点击一个链接到facebook.com以下消息： Refused to display 'https://www.facebook.com/' in a frame because it set 'X-Frame-Options' to 'DENY'.

你可能会需要将网页（例如，崇高文本）上不使用编辑器，并在本地测试你的网页。