我的下拉菜单中的链接不起作用
The links in my drop down menu are not working
我是jquery、html和css的新手。当我试图在下拉菜单中链接到另一个页面时,链接不起作用。我使用jquery作为下拉菜单,它的工作方式就像我希望它工作一样——不确定可能是什么问题?
错误不在于下拉菜单,而在于我的a href中的链接,当你点击它们时,它们不起作用。css
nav#menu {
float: right;
margin-right: 150px;
}
nav#menu #menu-nav {
margin: 0;
padding: 0;
}
nav#menu #menu-nav li {
list-style: none;
display: inline-block;
}
nav#menu #menu-nav ul li a{
background: black;
width: 250px;
}
nav#menu #menu-nav li a {
color: #DE5E60;
font-size: 18px;
font-weight: 300;
line-height: 60px;
display: block;
padding-right: 1cm;
text-transform: uppercase;
}
nav#menu #menu-mav ul ul li{
padding-right: 1cm;
}
nav#menu #menu-nav li a:hover {
color: #FFFFFF;
}
nav#menu ul ul{
position:absolute;
width:400px;
display:none;
}
nav#menu ul ul li{
display:block;
background:#252525;
}
html
<header>
<div class="sticky-nav">
<a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>
<div id="logo">
<a href="#projects">
<img alt="" src="pictures/Logo.jpg" width="157px" height="114px">
</a>
</div>
<nav id="nav">
<nav id="menu">
<ul id="menu-nav">
<li><a href="#projects">Links</a>
<ul>
<li><a href="https://www.google.com/">google</a></li>
<li><a href="https://www.yahoo.com/">yahoo</a></li>
<li><a href="link1.html">Link 1</a></li>
<li><a href="link2.html">Link 2</a></li>
</ul>
</li>
<li><a href="#Services">Services</a>
<ul>
<li><a href="https://www.google.com/">google</a></li>
<li><a href="https://www.yahoo.com/">yahoo</a></li>
<li><a href="link1.html">Link 1</a></li>
<li><a href="link2.html">Link 2</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About Us</a></li>
</ul>
</nav>
</nav>
</div>
jquery
<script type="text/javascript">
$(document).ready(function() {
$("#menu ul li").on('mouseover',function() {
$(this).find("ul").stop().slideToggle(400);
});
$("#menu ul li").on('mouseout',function() {
$(this).find("ul").stop().slideToggle(400);
});
});
</script>
您可以尝试:
ul, ul li {
pointer-events:none;
}
a {
pointer-events:auto;
}
我发现了两个不同的问题,导致我的链接在网页上无法工作:
- 如果我使用Google Chrome下载网页(这样我就可以对页面进行反向工程),文件的前3行如下(我不知道为什么我不能让HTML代码的第一行出现在突出显示的框中,所以我最终不得不在<后面放一个空格,以便打印一些东西。顺便问一下,什么是回溯?)
<DOCTYPE html>
<!-- saved from url=(0116)https://www.imdb.com/ ... other stuff ... -->
<html lang="en-US">
当你从互联网上下载网页时,谷歌Chrome会在第二行插入评论,这样你就可以知道网页来自哪里。现在,准备好了,导致链接不起作用的是第2行。。。评论!
如果您在页面顶部有一条注释,并且删除了该注释,则链接(位于HTML文件的<body>下方)将神奇地开始工作。
- 我看到以下代码导致链接无法工作:
<div class="main">
... various other HTML code ...
<a href="https://www.youtube.com/watch?v=0WxdcL_hBxU">
<img src="thumbnail-photo.jpg">
</a>
</div>
CSS代码:
.main {
... various css code ...
z-index=-1;
}
在这个例子2中,我写了一些代码,允许你点击一个图像,然后你会被重定向到YouTube视频。导致链接不起作用的原因是CSS代码:z-index=-1
如果将值更改为z-index=0,则链接将正常工作。
相关文章:
- 我的下拉菜单中的链接不起作用
- Ajax:Ajax响应中的链接不起作用
- jQuery Mobile到其他页面的锚链接不起作用
- 外部JavaScript链接不起作用
- 为什么我的动态更改链接不起作用?(Javascript)
- DOM事件链接不起作用
- javascript中最大字符数的链接不起作用
- jQuery高亮显示滚动导航链接不起作用
- 鼠标悬停导航链接不起作用
- 单击下拉菜单中的链接不起作用
- jQuery 链接不起作用
- 使用javascript的方法链接不起作用
- 具有另一个背景图像的图像上的链接不起作用
- AJAX 请求类似的链接不起作用
- 移动设备上的网站超链接不起作用
- JavaScript链接不起作用
- 谷歌地图自定义标记链接不起作用
- 铬错误或编码错误?目标页面中的锚/ID 链接不起作用
- 模式对话框内的链接不起作用
- IE javascript 书签let PDF 链接不起作用