Question

在我的导航按钮中，我有以下内容： - 主页，关于我们，个人资料，更多信息，联系我们 我需要的是假设当我处理主页时，其文字颜色将变为黄色，其他颜色将保持白色..当我点击 aboutus 其文字颜色将变为黄色，其他颜色将保持白色。

所以我有这个： -

的style.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：有效{color：yellow} 所以，为什么不留下来？

Answer 1

使用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

Answer 2

您需要使用a:active作为有效链接，对于已访问，您可以使用a:visisted

对于iE

a:active{
 color:Yellow;  
}

<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>

Answer 3

使用课程

HTML

<li><a href="#" class="active">About us</a></li>

JS

var navItems = document.querySelectorAll('.navigation ul li a');
for(var i = 0; i < navItems.length; i++){
    navItems[i].addEventListener('click', function(e){
        for(var j = 0; j < navItems.length; j++)
            navItems[j].className = '';
        this.className = 'active';
    });

}

CSS

a.active{color:#ff0}

Answer 4

Ghost Rider所询问的不仅仅是在点击链接时改变颜色，或者是为了访问链接（在点击其他链接时不会重置）。

我不认为有任何选择器可以通过CSS实现您正在寻找的功能。但是，您可以在jQuery / JS中执行类似的操作：

在你的剧本中：

＆＃13;

/*
 This will work specifically with your primary menu links,
 and won't alter any other div links. You also won't need
 to make changes to your CSS, but you could otherwise do
 the same with classes if you wish to toggle a CSS class.
 */
$('.navigation.primary > ul > li > a').click(function() {
  //reset all menu links to default color
  $('.navigation.primary > ul > li > a').css('color', '#fff');
  //set currently pressed to active color which will remain until next link pressed
  $(this).css('color', 'yellow');
});

＆＃13;

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;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

编辑：为了以防万一，请注意，只有当用户在同一页面上并点击锚链接时，它才会生效，一旦他们离开到另一个页面/重新加载，它就会重置。

Answer 5

尝试删除活动类并为当前选择添加类：

$("a").click(function(){
  $('.clearfix a').removeClass("active");
   $(this).addClass("active");
});

Answer 6

你可以这样做

＆＃13;

.navigation ul a.active{
    // write your color code here.
}

or

.navigation ul a:active{
    // write your color code here.
}

＆＃13;

css代码如何更改活动导航按钮的颜色

6 个答案: