Question

我将尝试通过示例解释这一点。

在HTML / CSS中，假设我创建了一个导航栏，其中一个名为“home”的按钮指向主页。如果我单击主页按钮，它的不透明度从1变为.5。当我留在主页上时，它保持.5，但是一旦我离开主页，比如说“方向”页面，主页按钮将变回1的不透明度，现在“方向”按钮是不透明的。 5。

那么，如何设置按钮以便一旦点击，它将改变不透明度，但是一旦我离开页面它引导我，它会改变回来？

目前，我在导航栏的HTML中有以下代码

<div id = "navigation">
  <ul>
  <li><a class = "nav" href = "Home.html">HOME</a><li>
  <li><a class = "nav" href = "index.html">BLOG</a><li>
  <li><a class = "nav" href = "thekids.html">KIDS</a><li>
  <li><a class = "nav" href = "Gallery.html">GALLERY</a><li>
  <li><a class = "nav" href = "http://www.mayorpotencial.org/">MP</a><li>
</ul>
</div>

然后，在CSS中，我有：

 #navigation {

  position: absolute;
  padding: 0;
  margin-left: 0;
  background-color: rgba(0, 0, 0, .6);
  height: 80px;
  width: 100%;
  text-decoration: none;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: center;

}

li {
  display: inline-block;
  float: none;

}

a.nav {
  margin-top: 25px;
  margin-left: 30px;
  margin-right: 30px;
  padding: 5px 5px 5px 5px;
  text-align: center;
  font-size: 13px;
  color: white;
  display: block;
  border: solid white 1px;
  text-decoration: none;
}

a.nav:hover {
  border: solid white 1px;
  border-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.5);
   }

我试图使用：访问过，但由于这是从历史中拉出来的，一旦我点击按钮，即使我离开页面，不透明度仍然存在。

感谢您的帮助。

修改

为了更好地说明我需要帮助的内容，请查看下面这个网站的导航栏。

http://www.aiesec-cornell.org/

正如您在本网站中看到的，当您将鼠标悬停在其中一个按钮上时，它的不透明度会发生变化。我想要它，以便在您单击按钮后，它将保持半透明不透明度。但是，一旦离开与该按钮对应的页面，它将返回完全不透明度。这也意味着您单击的新按钮现在也会改变不透明度。

我怎样才能做到这一点？

分辨

为了解决这个问题，我创建了一个id =“active”，并将该id添加到我当前所在的任何元素的页面上。所以，如果我在主页上，我将其添加到带有“home.html”的元素中。 #active只是将不透明度设置为.5。

Answer 1

由于您的NavBar链接到所有不同的html

只需创建一个css：

.selected {
    color: red;
}

并将其添加到您当时所处的页面a（链接）标记中。{/ p>

这只会改变颜色，但你也可以使用不透明度。

我觉得这是你可以玩的最简单的案例

希望这会有所帮助

Answer 2

这是你要找的东西吗？您希望当前处于活动状态的链接的不透明度为0.5？

修改

a.current{ opacity: 0.5; }

快速编辑以详细说明这个答案：

您可以将.current应用于您希望受该类影响的每个元素，但是如果您是动态生成HTML而不是静态页面，那么您应该考虑应用JavaScript检查以了解哪个导航按钮将类添加到。

<强> EG：

你有一个＆＃39; Home＆＃39;和＆＃39;关于＆＃39;页。您需要脚本来检测您所在的页面，然后根据条件将.current类应用于元素。

第二次修改：我刚刚阅读了您的更新，发现您已经完成了此操作。＆GT; _＆LT;

在HTML / CSS中暂时单击链接

2 个答案: