Home / Questions / 128461
Accepted
omaza1990
Asked: 2020-01-03 16:55:55 +0800 CST 2020-01-03 16:55:55 +0800 CST

不改变菜单中“li”元素的颜色 - CSS

  • 772

为什么即使我单击另一个菜单项也始终保留第一个“li”菜单项？

如果不是将地址放在每个“li”应该去的地方，我只需添加一个 href="#" 它对我有用，但地址它不起作用。

代码：

$(document).ready(function() {
  $('ul li a').click(function() {
    $('li a').removeClass("active");
    $(this).addClass("active");
  });
});
#menu_horizontal li {
  list-style: none;
  display: inline;
  margin-left: 10px;
}

#menu_horizontal li a {
  padding: 3px 1em;
  border: 1px solid #778;
  border-bottom: none;
  background: #DDE;
  text-decoration: none;
}

#menu_horizontal li a:link {
  color: #448;
}

#menu_horizontal li a:hover {
  color: white;
  background: red;
  border-color: #227;
}

#menu_horizontal .active {
  background: red;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu_horizontal">
  <li class="nueva" id="nueva"><a class="active" href="menu_cliente.php?nueva=1">NUEVA OPINIÓN</a></li>
  <li class="ver" id="ver"><a href="menu_cliente.php?ver=1">VER OPINIONES</a></li>
  <li class="eliminar" id="eliminar"><a href="menu_cliente.php?eliminar=1">ELIMINAR OPINIÓN</a></li>
  <li class="datos_cliente" id="datos_cliente"><a href="menu_cliente.php?datos_cliente=1">DATOS PERSONALES</a></li>
</ul>

html

2 Answers

  1. 使用 CSS 它不会是动态的，因为您必须为您拥有的每个链接添加一个类。所以 jquery 简化了事情，每次你点击一个链接时，活动类都会添加到该链接中，同时它会从活动的链接中删除。

    我希望能有所帮助。

    $(document).ready(function() {
  $('ul li a').click(function() {
    $('li a').removeClass("active");
    $(this).addClass("active");
  });
});
    #menu_horizontal {
  padding: 3px 0px;
  border-bottom: 1px solid #778;
  font: bold 16px Verdana, sans-serif;
}

#menu_horizontal li {
  list-style: none;
  display: inline;
  margin-left: 10px;
}

#menu_horizontal li a {
  padding: 3px 1em;
  border: 1px solid #778;
  border-bottom: none;
  background: #DDE;
  text-decoration: none;
}

#menu_horizontal li a:link {
  color: #448;
}

#menu_horizontal li a:hover {
  color: white;
  background: red;
  border-color: #227;
}

#menu_horizontal li a#current {
  background: #AAE;
}

#menu_horizontal .active {
  background: red;
  color:white;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="menu_horizontal">
  <li id="nueva"><a class="active" href="#">NUEVA OPINIÓN</a></li>
  <!-- id="current" -->
  <li class="ver" id="ver"><a href="#">VER OPINIONES</a></li>
  <li class="eliminar" id="eliminar"><a href="#">ELIMINAR OPINIÓN</a></li>
  <li class="datos_cliente" id="datos_cliente"><a href="#">DATOS PERSONALES</a></li>
</ul>

    • 4
  2. Best Answer

    只需使用 CSS 选择器就可以完成一些事情:target。With:target将选择id在 URI 片段标识符中指定的元素（ 后面的部分#）。

    因此，通过将链接从 更改menu_cliente.php?nueva=1为menu_cliente.php?nueva=1#nueva，当您单击“新意见”并重新加载页面时，由于添加#了id菜单选项，该选项将被激活：

    #menu_horizontal li {
  list-style: none;
  display: inline;
  margin-left: 10px;
}

#menu_horizontal li a {
  padding: 3px 1em;
  border: 1px solid #778;
  border-bottom: none;
  background: #DDE;
  text-decoration: none;
}

#menu_horizontal li a:link {
  color: #448;
}

#menu_horizontal li a:hover {
  color: white;
  background: red;
  border-color: #227;
}

#menu_horizontal li:target a {
  background: red;
  color: white;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu_horizontal">
  <li class="nueva" id="nueva"><a class="active" href="menu_cliente.php?nueva=1#nueva">NUEVA OPINIÓN</a></li>
  <li class="ver" id="ver"><a href="menu_cliente.php?ver=1#ver">VER OPINIONES</a></li>
  <li class="eliminar" id="eliminar"><a href="menu_cliente.php?eliminar=1#eliminar">ELIMINAR OPINIÓN</a></li>
  <li class="datos_cliente" id="datos_cliente"><a href="menu_cliente.php?datos_cliente=1#datos_cliente">DATOS PERSONALES</a></li>
</ul>

    作为建议：不是每次单击菜单时都重新加载 menu_client.php 页面，您可以做的是#在页面更改时进行 AJAX 调用。

    这将提供更好的用户体验，因为整个页面不会重新加载，公共部分将保持不变，只有一个主容器会改变，这也将使您的网站更快。

    您可以在另一个问题中看到一个示例。

    • 3