1
我有一個下拉導航。我想要做的是當我點擊任何子菜單鏈接時，我希望鏈接處於活動狀態時父按鈕的顏色保持更改。 這裏是代碼的小提琴鏈接。 https://jsfiddle.net/v28ydshL/如何使父元素的顏色在子元素被訪問/活動時更改
<nav>
<div class="navbar-header">
<button style="background-color: #3382d5;" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menubar">
<span style="background-color: white;" class="icon-bar"></span>
<span style="background-color: white;" class="icon-bar"></span>
<span style="background-color: white;" class="icon-bar"></span>
</button>
</div>
<div id="menubar" class=" collapse navbar-collapse row">
<ul id="dropdownNavbar" class="nav navbar-nav">
<li class="dropdown">
<button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-time"></span> Time Card
<span class="caret"></span></button>
<div class="dropdown-content">
<a id="showTimeCard" href="#">My Time Card</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
<a href="#">Sub Menu 5</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-stats"></span> Project
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-user"></span> HR Links
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn dropbtn">
<span class="glyphicon glyphicon-screenshot"></span> Leave Tracker
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn dropbtn">
<span class="glyphicon glyphicon-briefcase"></span> Accounts
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
<a href="#">Sub Menu 5</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn dropbtn">
<span class="glyphicon glyphicon-headphones"></span> Service Desk
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn dropbtn">
<span class="glyphicon glyphicon-file"></span> Reports
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
<a href="#">Sub Menu 5</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn dropbtn">
<span class="glyphicon glyphicon-cog"></span> Settings
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
</div>
</li>
</ul>
</div>
</nav>
這裏是我的CSS
ul {
list-style-type: none;
padding-left: 1px;
}
.dropdown {
float: left;
padding-right:1px;
}
.dropbtn{
background-color: #060975;
height:30px;
border-radius: 0px 10px;
}
li button, .dropbtn {
display: inline-block;
background-color:#3382d5;
color: white;
text-align: center;
}
li button:hover, .dropdown:hover .dropbtn {
background-color: #31b0d5;
}
button.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #e8f3f4;
min-width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
z-index: 10;
}
.navbar-header{
overflow: visible;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 5px 10px;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #d8dee2
}
.dropdown-content a:visited .dropbtn{
background-color: #e8f3f4;
}
.dropdown:hover .dropdown-content {
display: block;
}
#menubar{
padding-top: 5px;
overflow: visible;
z-index: 10;
padding-left:0px;
padding-right: 0px;
margin: 0px;
}
#dropdownNavbar{
margin: 0px;
}
當您按下子菜單鏈接，將您導航到另一個頁面？如果是這樣，你應該突出顯示家長取決於你的網頁。 –
@JensAlenius沒有頁面不應該重新加載。 –
'css'中沒有'parent selector'，請嘗試'js'。 –