Html CSS菜单-导航栏在选择子项后拒绝高亮显示父项
我知道有400个这样的线程,但似乎每个人的代码都有一点不同:我设置了CSS,这样每当你在导航页面上悬停时,就会出现一个蓝色条,当点击链接页面时,蓝色条就会停留在上面。当我用下拉菜单点击其中一个链接时,我无法让它停留在父页面上。我可以在下拉列表(lol)中显示一个蓝色条,但根本无法让它与家长保持一致。我已经尝试了所有的祖先提示,所有的菜单当前提示,我只是在胡思乱想。我将永远感激任何帮助Html CSS菜单-导航栏在选择子项后拒绝高亮显示父项,html,css,drop-down-menu,navbar,dropdown,Html,Css,Drop Down Menu,Navbar,Dropdown,我知道有400个这样的线程,但似乎每个人的代码都有一点不同:我设置了CSS,这样每当你在导航页面上悬停时,就会出现一个蓝色条,当点击链接页面时,蓝色条就会停留在上面。当我用下拉菜单点击其中一个链接时,我无法让它停留在父页面上。我可以在下拉列表(lol)中显示一个蓝色条,但根本无法让它与家长保持一致。我已经尝试了所有的祖先提示,所有的菜单当前提示,我只是在胡思乱想。我将永远感激任何帮助 /*** ----------------------------CHANGE THE COLO
/*** ----------------------------CHANGE THE COLOR OF THE SQUARES UNDERNEATH THE NAVIGATION BAR HERE ------------------------------- ***/
nav ul li a:hover, nav ul li a.current {
border-bottom: 5px solid #00BCF2;
color: #00BCF2;
}
/*** THIS WILL PROBABILY GET US TO WHERE WE WANT TO BE WITH ADDING AND HOVERING THE PARENT LINK
nav ul li:hover > a, .current-menu-ancestor > a, .current-menu-parent > a {
background-color: #536f9e !important;
color: #ffffff !important;
}
***/
/*** add publications from box site level 1 here ***/
/**** Dropdown ****/
/*** ----------------------------- CHANGE THE LOGO OF THE DROPDOWN ARROW ------------------------------ ***/
/*** ----------------------------- CHANGE THE height OF THE DROPDOWN menu ------------------------------ ***/
.dropdown{
padding: 14px 16px 37px 10px;
background: url('images/dropdown_icon.png') no-repeat 99% 21px;
}
.dropdown:hover{
border-bottom: none;
}
nav ul ul{
display: none;
margin: 0;
position: absolute;
background-color: #000;
z-index: 1;
}
nav ul li:hover ul{
display: block;
opacity: 0.9;
}
nav ul li ul li{
margin: 0;
}
/*** ----------------------------- CHANGE THE WIDTH OF THE DROPDOWN MENU ------------------------------ ***/
nav ul li ul li a{
margin: 0;
padding: 5px 10px;
width: 100px;
}
/*** ----------------------------- CREATE BLUE BARS INSIDE OF DROPDOWN ------------------------------ ***/
nav ul li:hover ul li a:hover, nav ul li:hover ul li a.current{
border-bottom: none;
}
根据要求,我的开头-->标题的HTML为:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XXXXXX</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$('a').each(function() {
if ($(this).prop('href') == window.location.href) {
$(this).addClass('current');
}
<!--END OF HEADER -->
});
});
</script>
</head>
<body>
<div id="wrapper">
<!--========================== L O G O & N A V B A R ============================-->
<header>
<div id="logo">
<a href="home.html"><img src="images/xylophone.png" alt="YouRock" /></a>
</div>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Founders</a></li>
<li><a href="#" class="dropdown">Pipeline</a>
<ul>
<ul>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="Phases.html">Phase I / II</a></li>
XXXXXX
$(函数(){
$('a')。每个(函数(){
if($(this.prop('href')==window.location.href){
$(this.addClass('current');
}
});
});
-
在timeline.html和phases.html上放置
-
检查活动链接是否在下拉框内的最简单方法是设置一个类。另外,将一个类设置为包含的
。下拉链接也可能很有用,以便轻松实现:
<li class="drop-li"><a href="#" class="dropdown">Pipeline</a>
<ul>
<li><a href="timeline.html" class="dropdowned">Timeline</a></li>
<li><a href="Phases.html" class="dropdowned">Phase I / II</a></li>
</ul>
这样,无论您有多少下拉列表,链接和模板的名称是什么,它都能工作。我明白了,您希望当前页面的菜单项下有一个蓝色条吗?确实如此。到目前为止,我的理解是,当悬停下拉列表的一个li(例如Timeline)时,您希望在父下拉列表类(例如Pipeline)上显示蓝色条。你能确认这是预期的行为吗?@PIIANTOM不是在该个人悬停时,而是在单击链接时。因此,当点击Home、About、Portfolio等时,我的蓝色条会停留在它们下面。当我点击我下拉列表中的链接时,我希望“管道”中有相同的蓝色下划线。在这种情况下,每个“下拉页面”上都会有几份导航副本。如果模板名称或导航栏将更改怎么办?那么菜单是动态的吗?请尝试'if($(this.prop('href')==window.location.pathname)`因为您的a链接是相对url,window.location.href将返回完整url,因此将永远不会匹配相对url。我认为这不起作用-只是为了确认一下:所以对于何时回家,关于,公文包等,单击后,我的蓝色条将停留在它们下面。当我单击下拉列表中的链接时,我希望“管道”具有相同的蓝色下划线——在上面的场景中,我在单击时看不到条形图,比如说时间线。上传我所有的CSS会有帮助吗?很抱歉,我认为@chem1st也不起作用,-只是确认一下:所以当点击Home、About、Portfolio等时,我的蓝色条会留在它们下面。当我单击下拉列表中的链接时,我希望“管道”具有相同的蓝色下划线——在上面的场景中,我在单击时看不到条形图,比如说时间线。上传我所有的CSS会有帮助吗?我知道你想要什么,我的代码就是这么做的。你做的一切都正确吗?你能告诉我在CSS中在哪里实现$(函数)吗?在我上面显示的代码的哪一行之后,您添加了以下内容-顺便说一句,我非常感谢您的帮助。我从来没有经历过这样一个公众论坛,那里的问题被如此热切地回答——在今天的大多数论坛上,问题都会遭到令人厌恶的嘲讽——我希望有一天,在我掌握了一点技能之后,我能够帮助别人!抱歉@chem1st我不是指CSS,而是指.js文件。我对j query不太熟悉,所以我所做的只是创建一个新文件——我猜在这里名为dropdowned.js,但我认为我做得不对。我复制了你的整个js代码并保存为.js文件你已经接受了我的答案,这是否意味着你已经成功地完成了你想要的?是的,您可以将我的答案直接插入js文件或模板中的script
标记中
$(function(){
$('a').each(function() {
if ($(this).prop('href') == window.location.href) {
if ($(this).attr('class') == 'dropdowned'){
$(this).closest('.drop-li').children('a').addClass('current');
}
else{
$(this).addClass('current');
}
}
}