Question

我是HTML和CSS的新手。我有一个导航栏，它突出显示你淡入的菜单项，从中间淡出效果，但是如何使用相同的样式保持下划线的活动菜单项？

我还使用Typo3 / Fluid创建了html代码并分配了＆＃34; active＆＃34;类到活动菜单项。

到目前为止它是这样的：https://jsfiddle.net/wr5w09r0/

CSS

div#top_nav{
    text-align: center;
}

div#top_nav li{
    display: inline;
    padding: 15px;
}

div#top_nav a {

display: inline-block;
position: relative;

}

div#top_nav a:hover{
    color: orange;
}


div#top_nav a:before{

  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -3px;
  left: 0;
  background-color: orange;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.15s ease-in-out 0s;
  transition: all 0.15s ease-in-out 0s;

}

div#top_nav a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.active {
    color: orange;
}

Answer 1

希望这会对你有所帮助。我添加了这个简单的元素。

div#top_nav a:hover:before , div#top_nav a.active:before

＆＃13;

a {
  text-decoration: none;
}

div#top_nav{
	text-align: center;
}

div#top_nav li{
	display: inline;
	padding: 15px;
}



div#top_nav a {

display: inline-block;
position: relative;

}

div#top_nav a:hover{
	color: orange;
}


div#top_nav a:before{

  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -3px;
  left: 0;
  background-color: orange;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.15s ease-in-out 0s;
  transition: all 0.15s ease-in-out 0s;

}

div#top_nav a:hover:before , div#top_nav a.active:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.active {
	color: orange;
}

＆＃13;

<div id="top_nav">
<ul>
<li class="mainMenu-itemLevel1">
<a href="index.php?id=2" class="active">seite1</a></li>
<li class="mainMenu-itemLevel1">
<a href="index.php?id=3">seite2</a>
</li><li class="mainMenu-itemLevel1">
<a href="index.php?id=4">seite3</a></li>
<li class="mainMenu-itemLevel1">
<a href="index.php?id=6">seite4</a></li>
<li class="mainMenu-itemLevel1">
<a href="index.php?id=7">Seite5 lang Hover</a></li>
</ul>


</div>

＆＃13;

希望这会对你有所帮助。

Answer 2

您需要使用javascript来执行此操作。

您的javascript会在相关菜单项中添加一个类active，然后您可以使用css对其进行适当的设置。

将active类添加到元素后，要应用橙色样式，请使用：

div#top_nav.active a{
    color: orange;
}

请注意添加.active仅选择有效项目，并在链接上省略:hover，因为您不再关心悬停。

您可以在这里找到, css运算符，将相同的样式应用于不同的选择器（活动和悬停），如下例所示：

var items = document.getElementsByClassName('item');
var activeClassName = 'active';

function unselectItems() {
  for (var i = 0; i < items.length; i++) {  
    items[i].classList.remove(activeClassName);
  }
}

function selectItem(item) {
  unselectItems();
  item.classList.add(activeClassName);
}

function onItemClick(event) {
  selectItem(event.target);
}

for (var i = 0; i < items.length; i++) {  
  items[i].addEventListener('click', onItemClick);
}

span {
  border: 1px solid black;
  padding: 5px;
}

span:hover, span.active {
  color: white;
  background-color: black;
}

<nav>
  <span class="item">Home</span>
  <span class="item">About</span>
  <span class="item">Contact</span>  
<nav>

如何保持活动菜单项下划线？

2 个答案: