gpt4 book ai didi

jquery - CSS 链接在点击时不起作用

转载 作者:太空宇宙 更新时间:2023-11-03 20:12:37 27 4
gpt4 key购买 nike

我正在处理叠加菜单,我有 2 个菜单,一个在隐藏叠加时显示,第二个在该叠加中显示(另一个在您单击汉堡包并激活叠加时隐藏)。我的问题是,当您单击链接时(我试图将 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>

最佳答案

您正在使用的在线集成开发环境阻止您将页面定向到外部 url(到您当前的元素)。

单击 facebook.com 的链接时,控制台会显示以下消息:拒绝在框架中显示“https://www.facebook.com/”,因为它将“X-Frame-Options”设置为“DENY”。

您可能需要使用不在网络上的编辑器(例如 Sublime Text)并在本地测试您的网页。

关于jquery - CSS 链接在点击时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28384336/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com