Question

我在网页上有一个看起来很棒的div菜单，但我想通过更改元素的颜色来指示活动页面。

我尝试过的东西不起作用。

告诉我这一点，蝙蝠侠：http://jsfiddle.net/jp2code/rj39rup6/

这是CSS工作的一部分，因为我从网站上复制了它：

nav {
  background-color: #999999; /* silver */
  border: 1px solid red;
  border-radius: 4px;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
  display:block;
  font-family: Stencil, sans-serif, monospace;
  margin: 8px 22px 8px 22px;
  overflow: hidden;
  width: 90%;
}
nav ul {
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline-block;
  list-style-type: none;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
nav > ul > li > a > .caret {
  border-top: 4px solid #CC0000; /* Red */
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
  display: inline-block;
  height: 0;
  width: 0;
  vertical-align: middle;
  -webkit-transition: color 0.1s linear;
  -moz-transition: color 0.1s linear;
  -o-transition: color 0.1s linear;
  transition: color 0.1s linear; 
}
nav > ul > li > a {
  color: #CC0000;
  display: block;
  line-height: 45px;
  padding: 0 24px;
  text-decoration: none;
}
nav > ul > li:hover {
  background-color: rgb( 40, 44, 47 ); /* blue shark */
}
nav > ul > li:hover > a {
  color: rgb( 255, 255, 255 ); /* white */
}
nav > ul > li:hover > a > .caret {
  border-top-color: rgb( 255, 255, 255 ); /* white */
}
nav > ul > li > div {
  background-color: rgb( 40, 44, 47 ); /* blue shark */
  border-top: 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
  display: none;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 165px;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
nav > ul > li:hover > div {
  display: block;
  opacity: 1;
  visibility: visible;
}
nav > ul > li > div ul > li {
  display: block;
}
nav > ul > li > div ul > li > a {
  color: #fff;
  display: block;
  padding: 12px 24px;
  text-decoration: none;
}
nav > ul > li > div ul > li:hover > a {
  background-color: rgba( 255, 255, 255, 0.1);
}

html是：

<div class="nav">
  <nav>
    <ul>
      <li id="miHome"><a href="Default.aspx">Home</a></li>
      <li id="miAbout"><a href="About.aspx">About</a></li>
      <li id="miContact"><a href="Contact.aspx">Contact</a></li>
    </ul>
  </nav>
</div>

jQuery：

$(document).ready(function () {
  var d = document.getElementById("miHome");
  d.className = 'selected';
});

我添加的CSS（可能是错误的），是：

.selected nav > ul > li > div {
  background-color: rgb( 189, 189, 189 ); /* lighter silver */
  color: black;
}
.selected nav > ul > li > a {
  background-color: rgb( 189, 189, 189 ); /* lighter silver */
  color: black;
}
.selected nav > ul > li:hover {
  background-color: rgb( 40, 44, 47 ); /* blue shark */
}
.selected nav > ul > li:hover > a {
  background-color: rgb( 189, 189, 189 ); /* lighter silver */
  color: black;
}

我写错了CSS或者错误地使用jQuery吗？有人可以帮我搞定吗？

此外，网页设计更好的人是否可以为活动菜单项提供更好的颜色选择？网站颜色有蓝色，红色，金色和银色（USMC Dress Blues）。

Answer 1

您定位目标.selected后的错误链。删除nav > ul > li >链以访问元素

＆＃13;

$(document).ready(function() {
  var d = document.getElementById("miHome");
  d.className = 'selected';
});

＆＃13;

nav {
  background-color: #999999;
  /* silver */
  border: 1px solid red;
  border-radius: 4px;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
  display: block;
  font-family: Stencil, sans-serif, monospace;
  margin: 8px 22px 8px 22px;
  overflow: hidden;
  width: 90%;
}
nav ul {
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline-block;
  list-style-type: none;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
nav > ul > li > a > .caret {
  border-top: 4px solid #CC0000;
  /* Red */
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
  display: inline-block;
  height: 0;
  width: 0;
  vertical-align: middle;
  -webkit-transition: color 0.1s linear;
  -moz-transition: color 0.1s linear;
  -o-transition: color 0.1s linear;
  transition: color 0.1s linear;
}
nav > ul > li > a {
  color: #CC0000;
  display: block;
  line-height: 45px;
  padding: 0 24px;
  text-decoration: none;
}
nav > ul > li:hover {
  background-color: rgb(40, 44, 47);
  /* blue shark */
}
nav > ul > li:hover > a {
  color: rgb(255, 255, 255);
  /* white */
}
nav > ul > li:hover > a > .caret {
  border-top-color: rgb(255, 255, 255);
  /* white */
}
nav > ul > li > div {
  background-color: rgb(40, 44, 47);
  /* blue shark */
  border-top: 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
  display: none;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 165px;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
nav > ul > li:hover > div {
  display: block;
  opacity: 1;
  visibility: visible;
}
nav > ul > li > div ul > li {
  display: block;
}
nav > ul > li > div ul > li > a {
  color: #fff;
  display: block;
  padding: 12px 24px;
  text-decoration: none;
}
nav > ul > li > div ul > li:hover > a {
  background-color: rgba(255, 255, 255, 0.1);
}
.selected > div {
  background-color: rgb(189, 189, 189);
  /* lighter silver */
  color: black;
}
.selected > a {
  background-color: rgb(189, 189, 189);
  /* lighter silver */
  color: black;
}
.selected:hover {
  background-color: rgb(40, 44, 47);
  /* blue shark */
}
.selected:hover > a {
  background-color: rgb(189, 189, 189);
  /* lighter silver */
  color: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="nav">
  <nav>
    <ul>
      <li id="miHome"><a href="Default.aspx">Home</a>
      </li>
      <li id="miAbout"><a href="About.aspx">About</a>
      </li>
      <li id="miContact"><a href="Contact.aspx">Contact</a>
      </li>
    </ul>
  </nav>
</div>

＆＃13;

Answer 2

你的CSS错了。类.selected位置错误。

.selected > div {
  background-color: rgb( 189, 189, 189 ); /* lighter silver */
  color: black;
}
.selected  > a {
  background-color: rgb( 189, 189, 189 ); /* lighter silver */
  color: black;
}
.selected:hover {
  background-color: rgb( 40, 44, 47 ); /* blue shark */
}
.selected:hover > a {
  background-color: rgb( 40, 44, 47 ); /* blue shark */
  color: white;
}

Answer 3

首先，你没有正确使用jQuery。

var d = document.getElementById("miHome");
d.className = 'selected';

可以简化为

$('#miHome').addClass('selected');

此外，您的CSS并未针对正确的元素。您正在将所选类添加到li元素，而不是nav元素的父元素。所以你的CSS规则需要调整。

请看这里的小提琴： http://jsfiddle.net/e2a30ynb/2/ （我还删除了一些未使用的CSS声明）

Answer 4

我认为你需要在页面href加载时更改li的颜色..如果你需要的话可以使用

$(document).ready(function () {
   // get path
  var pathname = window.location.pathname.split("/");
   // get file name
  var filename = pathname[pathname.length-1];
  $('a[href="'+filename+'"]').closest('li').addClass('selected');
});

让我解释一下..说你的url = 'http://www.website.com/Default.aspx';我们将这个url拆分为一个数组..并获取文件名例如（Default.aspx）所以我们找到了href="Default.aspx"的锚{1}}并使用最接近获得此li的父li和addClass ...此代码将使用其他锚点进行相同的操作..但请确保您的文件名是url数组中的最后一个变量{{1} } /Default.aspx希望它会有所帮助

Answer 5

此代码会在页面加载时将类添加到正确的导航项。

＆＃13;

$(document).ready(function () {
  id = (function() {
    f = window.location.href.split('/').pop().split('.')[0];
    return "mi"+f.substr(0, 1).toUpperCase() + f.substr(1)
  })
  $("#"+id()).addClass("selected")
});

＆＃13;

使用CSS和JQuery设置活动菜单项

我写错了CSS或者错误地使用jQuery吗？有人可以帮我搞定吗？

5 个答案: