javascript - css代码如何更改事件导航按钮的颜色

标签 javascript jquery html css

在我的导航按钮中，我有以下内容:- 主页，关于我们，简介，更多，联系我们 我需要的是假设当我在home上工作时它的文字颜色会变成黄色，其他人会保持白色..当我点击关于我们> 它的文本颜色将变为黄色，其他的将保持白色。

所以我有这个:--

样式.css

a.active{
    color: yellow;
} 

/* 
a:active {
  background-color: yellow;
  text-decoration: none;
  color: #fff;
} */



/* Toggled State */
input[type="checkbox"]:checked ~ .wrapper {
  -webkit-transform: translateX(250px);
  -moz-transform: translateX(250px);
  -ms-transform: translateX(250px);
  -o-transform: translateX(250px);
  transform: translateX(250px);
}

input[type="checkbox"]:not(:checked) ~ .wrapper {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}



  input[type=checkbox]:checked ~ .wrapper {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }

  .navigation.primary {
    max-width: 960px;
    display: block;
    margin: 0 auto;
    padding: 20px 0;
    background-color: #393b3d;
  }
  .navigation.primary ul {
    text-align: center;
    position: relative;
    z-index: 999;
  }
  .navigation.primary ul li {
    display: inline;
    margin: 0 10px;
    position: relative;
  }
  .navigation.primary ul li ul {
    position: absolute;
    left: -999em;
    text-align: left;
    background-color: #ccc;
    opacity: 0;
  }
  .navigation.primary ul li ul li {
    margin: 0;
    border-top: 1px dotted #000;
  }
  .navigation.primary ul li ul li:first-child {
    border-top: none;
  }
  .navigation.primary ul li ul li a {
    padding: 10px;
    display: block;
    color: #fff;
    white-space: nowrap;
  }


  .navigation.primary a {
    padding: 10px;
    display: block;
    color: #fff;
    white-space: nowrap;
  }


  .navigation.primary ul li ul li a:hover {
    color: #999;
  }



  .navigation.primary ul li:hover > ul {
    left: 0;
    opacity: 1;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  .navigation.primary ul li a {
    display: inline-block;
  }
  .navigation.primary ul li a:hover {
    color: #ccc;
  }

/*    .navigation.primary ul li a:active {
    color: yellow;
  } */
}
}

html 文件如下:--

<body>

  <input type="checkbox" id="toggle-menu">
<div class="wrapper">
<label for="toggle-menu">&gt;</label>
<h1>realNews</h1>
<div class="navigation primary">
  <ul class="clearfix">
    <li><a href="#" >Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Profiles</a></li>
    <li><a href="#">More</a></li>
    <li><a href="#">Contact us</a></li>
  </ul>
</div>

  <div class="content">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuriesLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
  </div>
</div>

这里，当我点击任何按钮时，它会变成黄色。但不会停留。我需要保持黄色，直到我点击另一个按钮。我做错了什么？？？ 我有 a:active{color:yellow} 那么，为什么它不保留？

最佳答案

使用 jquery 非常简单

看下面的演示

http://jsfiddle.net/pqckxw59/

完整的html代码

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
    $(".clearfix li").live("click",function(){
    $(".clearfix li").removeClass("active");
        $(this).addClass("active");
    });
</script>
<style>
    .active{
        background-color:Yellow;
    }
body {
  background-color: #f0f6ff;
  font-family: arial, georgia, sans-serif;
  font-size: 16px;
}

h1 {
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 20px;
}

ul {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #fff;
}


a:active {
  color: yellow;
     } 



p {
  margin: 10px 0;
}

.wrapper {
  width: 100%;
  position: relative;
  min-height: 600px;
  background-color: #fff;
  -webkit-box-shadow: -10px 0 15px #000;
  -moz-box-shadow: -10px 0 15px #000;
  box-shadow: -10px 0 15px #000;
  -webkit-transition: -webkit-transform 0.2s ease;
  -moz-transition: -moz-transform 0.4s ease;
  -ms-transition: -ms-transform 0.4s ease;
  -o-transition: -o-transform 0.4s ease;
  transition: transform 0.4s ease;
}
.wrapper .content {
  color: #ccc;
  padding: 10px;
  clear: both;
}

input[type="checkbox"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label {
  padding: 10px;
  clear: both;
  background-color: #fff;
  display: block;
  z-index: 999;
  float: left;
  cursor: pointer;
}

/* Toggled State */
input[type="checkbox"]:checked ~ .wrapper {
  -webkit-transform: translateX(250px);
  -moz-transform: translateX(250px);
  -ms-transform: translateX(250px);
  -o-transform: translateX(250px);
  transform: translateX(250px);
}

input[type="checkbox"]:not(:checked) ~ .wrapper {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.navigation.mobile {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.navigation.mobile ul {
  width: 250px;
}
.navigation.mobile ul li ul {
  display: none;
}
.navigation.mobile ul li a {
  display: block;
  padding: 10px;
  color: #333;
}
.navigation.mobile ul li a:hover {
  background-color: #82b965;
  color: #333;
}

.navigation.primary {
  display: none;
}

@media only screen and (min-width: 35em) {
  .wrapper {
    max-width: 960px;
    margin: 0 auto;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }

  label {
    display: none;
  }

  .navigation.mobile {
    display: none;
  }

  input[type=checkbox]:checked ~ .wrapper {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }

  .navigation.primary {
    max-width: 960px;
    display: block;
    margin: 0 auto;
    padding: 20px 0;
    background-color: #393b3d;
  }
  .navigation.primary ul {
    text-align: center;
    position: relative;
    z-index: 999;
  }
  .navigation.primary ul li {
    display: inline;
    margin: 0 10px;
    position: relative;
  }
  .navigation.primary ul li ul {
    position: absolute;
    left: -999em;
    text-align: left;
    background-color: #ccc;
    opacity: 0;
  }
  .navigation.primary ul li ul li {
    margin: 0;
    border-top: 1px dotted #000;
  }
  .navigation.primary ul li ul li:first-child {
    border-top: none;
  }
  .navigation.primary ul li ul li a {
    padding: 10px;
    display: block;
    color: #fff;
    white-space: nowrap;
  }


  .navigation.primary a {
    padding: 10px;
    display: block;
    color: #fff;
    white-space: nowrap;
  }

  .navigation.primary ul li ul li a:hover {
    color: #999;
  }



  .navigation.primary ul li:hover > ul {
    left: 0;
    opacity: 1;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  .navigation.primary ul li a {
    display: inline-block;
  }
  .navigation.primary ul li a:hover {
    color: #ccc;
  }
}
</style>
</head>
<body>
    <label for="toggle-menu">&gt;</label>
    <h1>rainBow</h1>
    <div class="navigation primary">
      <ul class="clearfix">
        <li><a href="#">Home</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Profiles</a></li>
        <li><a href="#">More</a></li>
        <li><a href="#">Contact us</a></li>
      </ul>
    </div>
</body>
</html>

如果您需要纯 css 解决方案，请查看以下链接

http://codepen.io/anon/pen/yNxpqb

关于javascript - css代码如何更改事件导航按钮的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31553975/

上一篇：html - 使 div 宽度等于它的兄弟？

下一篇：javascript - iphone6 上的 html5-canvas 无法正确缩放

相关文章：

javascript - 如何使用 jQuery 将 unicode 字符串转换为正确的字符？

html - 当我给子 div 留出边距时，父 div 的背景会移动

javascript - 如何通过 JavaScript/JQuery 将 HTML 文档添加到 <div></div> 中？

javascript - 脚本中将句子分成单独变量的错误

javascript - 是否可以在引用索引的循环中调用 jQuery 中的变量

jquery - 预填充 Google 自定义搜索字段

html - 如何更新 element.styles css

javascript - 是否可以连接 Lua 和 javascript？

Javascript 表刷新没有 jquery

javascript - 获取元素 ID - JavaScript

©2024 IT工具网  联系我们