Question

所以我最近一直在研究如何做到这一点，但我真的无法为我的html + css导航栏找到一个好方法。基本上，当您在网站的主页上时，标签颜色必须是“活跃的”＃34;或冷冻为不同的颜色。现在，当您将鼠标悬停在导航栏按钮上时，您可以在jsfiddle中看到它将更改不同的颜色，直到您将鼠标移开它。我的问题可能很难理解我的道歉。

JsFiddle：http://jsfiddle.net/jyh715yn/

感谢您的帮助！

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>

<body>
<img src="/Users/alexparsons/Desktop/AvoArt/img/logo2.jpg" style="left: 10px; margin: 0     auto; ">
<nav>
  <ul>
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Gallery</a>
    </li>
    <li>
        <a href="#">About Me</a>
    </li>
    <li>
        <a href="#">Request Order</a>
    </li>
    <li>
        <a href="#">Contact</a>
    </li>
  </ul>
</nav>

</body>




</html>


img {

  left: 10px;
}

body {
  width: 100%;
  max-width: 960px;
  margin: 0 auto; }
nav {
  width: 100%;
  margin: 0px 0; }
nav ul {
  list-style: none;
  overflow: hidden; }
nav ul li {
  float: left;
  width: 20%; }
nav ul li a {
  text-align: center;
  padding: 8px 0;
  display: block;
  width: 100%;
  background: #fff; /* Old browsers */
  background: -moz-linear-gradient(top,  
    #fff 0%, #fff 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%,#fff), 
    color-stop(100%,#fff)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  
    #fff 0%,#fff 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  
    #fff 0%,#fff 100%); /* Opera 11.10+ */
  background: linear-gradient(to bottom,  
    #fff 0%,#fff 100%); /* W3C, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#fff', 
    endColorstr='#fff',GradientType=0 ); /* IE6-9 */
  }
nav ul li a,
nav ul li a:focus,
nav ul li a:visited,
nav ul li a:hover,
nav ul li a:active {
  color: #000;
  text-decoration: none; }
nav ul li a:hover,
nav ul li a:active {
  background: #D3D3D3; /* Old browsers */
  background: -moz-linear-gradient(top,  
    #D3D3D3 0%, #D3D3D3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%,#D3D3D3), 
    color-stop(100%,#D3D3D3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  
    #D3D3D3 0%,#D3D3D3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  
    #D3D3D3 0%,#D3D3D3 100%); /* Opera 11.10+ */
   background: linear-gradient(to bottom,  
    #D3D3D3 0%,#D3D3D3 100%); /* W3C, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#000', 
    endColorstr='#000',GradientType=0 ); /* IE6-9 */
  }
nav ul li:first-child a {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px; }
nav ul li:last-child a {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px; }

Answer 1

正如我在评论中所说的那样，如果不知道你的系统将来会在哪里发展，那么确切地知道如何编写代码就有点困难了。对于仅使用哈希符号的链接，不清楚链接是在页面上还是在其他网页上。

通常，如果您的页面是用PHP生成的，您只需将代码放入检查正在显示的文件中，并添加一个“active”类，其中包含该活动元素的所有CSS规则。

但是如果没有这方面的知识，我会在下面找到一些工作。如果单击任何链接，它应该在该元素上显示一个块，就像它对悬停效果一样，直到单击另一个元素。

我使用了hashtag格式和CSS :target属性。有了更多的信息，我可能会帮助你更多，但只有给定的HTML，我就能尽我所能。

此方法的缺点

由于使用了哈希链接，它将继续将用户滚动到顶部。这可能会也可能不会在交互时产生明显的“跳跃”，具体取决于您网页的其他内容。

img {
  left: 10px;
}
body {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
nav {
  width: 100%;
  margin: 0px 0;
}
nav ul {
  list-style: none;
  overflow: hidden;
}
nav ul li {
  float: left;
  width: 20%;
}
nav ul li a {
  text-align: center;
  padding: 8px 0;
  display: block;
  width: 100%;
  background: #fff;
  /* Old browsers */
  background: -moz-linear-gradient(top, #fff 0%, #fff 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #fff));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #fff 0%, #fff 100%);
  /* Opera 11.10+ */
  background: linear-gradient(to bottom, #fff 0%, #fff 100%);
  /* W3C, IE10+ */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#fff', GradientType=0);
  /* IE6-9 */
}
nav ul li a,
nav ul li a:focus,
nav ul li a:visited,
nav ul li a:hover,
nav ul li a:active {
  color: #000;
  text-decoration: none;
}
nav ul li a:hover,
nav ul li a:active,
nav ul li:target a {
  background: #D3D3D3;
  /* Old browsers */
  background: -moz-linear-gradient(top, #D3D3D3 0%, #D3D3D3 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #D3D3D3), color-stop(100%, #D3D3D3));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #D3D3D3 0%, #D3D3D3 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #D3D3D3 0%, #D3D3D3 100%);
  /* Opera 11.10+ */
  background: linear-gradient(to bottom, #D3D3D3 0%, #D3D3D3 100%);
  /* W3C, IE10+ */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
  /* IE6-9 */
}
nav ul li:first-child a {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
nav ul li:last-child a {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

<img src="/Users/alexparsons/Desktop/AvoArt/img/logo2.jpg" style="left: 10px; margin: 0 auto; ">
<nav>
  <ul>
    <li id="home">
      <a href="#home">Home</a>
    </li>
    <li id="gallery">
      <a href="#gallery">Gallery</a>
    </li>
    <li id="about">
      <a href="#about">About Me</a>
    </li>
    <li id="request">
      <a href="#request">Request Order</a>
    </li>
    <li id="contact">
      <a href="#contact">Contact</a>
    </li>
  </ul>
</nav>

导航栏上的活动HTML按钮

1 个答案:

此方法的缺点