单击链接时如何更改跨度颜色

Question

好的，所以我有4个跨度，而我想要的是单击跨度中的链接时链接的跨度颜色发生变化。 我也想要它，因此，当单击范围中的另一个链接时，该范围会更改颜色，并且先前单击的范围会返回到其原始颜色。 不好意思，不好意思。 以下是我从另一个用户提出的问题中得到的js。 我尝试使用它并将其更改为对我有用，但是在尝试失败之后，没有运气。 感谢您的耐心等待，我是JavaScript新手，非常感谢您提供任何建议或帮助。 提前致谢！

 <script> $(document).ready(function() { $("#sec1").click(function() { $("#sec1").removeClass('active'); $(this).addClass('active'); }); }); </script> 

 CSS: #sec1 { height: 8vh; width:10%; text-align:center; position: fixed; top:9vh; left:0; background: rgb(238,238,238); /* Old browsers */ background: #7d7e7d; /* Old browsers */ background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */ background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */; display:inline; white-space:nowrap; overflow:hidden; } #sec1.active { background:grey; } #sec2 { height: 8vh; width:10%; text-align:center; position: fixed; top:9vh; left:10.25%; background: rgb(238,238,238); /* Old browsers */ background: #7d7e7d; /* Old browsers */ background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */ background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */; display:inline; white-space:nowrap; overflow:hidden; } #sec2.active{background:grey;} #sec3 { height: 8vh; width:10%; text-align:center; position: fixed; top:9vh; left:20.5%; background: rgb(238,238,238); /* Old browsers */ background: #7d7e7d; /* Old browsers */ background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */ background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */; display:inline; white-space:nowrap; overflow:hidden; } #sec3.active{background:grey;} #sec4 { height: 8vh; width:10%; text-align:center; position: fixed; top:9vh; left:30.75%; background: rgb(238,238,238); /* Old browsers */ background: #7d7e7d; /* Old browsers */ background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */ background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */; display:inline; white-space:nowrap; overflow:hidden; } #sec4.active{background:grey;} 

 html: <span id="sec1" class="box"><a href="" class="one"><p style="margin-top:2.5vh; font-size:1.25em;"><b>MOVIES</a></p></div> <span id="sec2" class="box"><a href="" class="two"><p style="margin-top:2.5vh; font-size:1.25em"><b>MUSIC</b></p></a></div> <span id="sec3" class="box" ><a href="" class="three"><p style="margin-top:2.5vh; font-size:1.25em"><b>RADIO</b></p></a></div> <span id="sec4" class="box"><a href="" class="four"><p style="margin-top:2.5vh; font-size:1.25em"><b>COMICS</b></p></a></div> 

Answer 1

我将使用框类选择器代替ID，然后清理HTML。

 $(document).ready(function() { var $boxes = $(".box").click(function() { $boxes.removeClass('active'); $(this).addClass('active'); }); }); 

 a {color: #ffffff; text-decoration:none; font-family:arial;} .box { color: #ffffff; background: rgb(238, 238, 238); /* Old browsers */ background: #7d7e7d; /* Old browsers */ background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7d7e7d), color-stop(100%, #0e0e0e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* IE10+ */ background: linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* W3C */ filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#7d7e7d', endColorstr='#0e0e0e', GradientType=0); /* IE6-9 */ ; display: inline-block; padding:10px 20px; white-space: nowrap; } .active { background: #aaa; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="sec1" class="box"> <a href="#" class="one"style="margin-top:2.5vh; font-size:1.25em;"> MOVIES </a> </span> <span id="sec2" class="box"> <a href="#" class="two" style="margin-top:2.5vh; font-size:1.25em"> MUSIC </a> </span> <span id="sec3" class="box" > <a href="#" class="three" style="margin-top:2.5vh; font-size:1.25em"> RADIO </a> </span> <span id="sec4" class="box"> <a href="#" class="four" style="margin-top:2.5vh; font-size:1.25em"> COMICS </a> </span> 

Answer 2

您发布的标记存在一些问题。

在这里，打开了一个span标签<span> ，但未正确将其作为div </div>关闭。 它应该作为跨度关闭。 </span> ：

<span id="sec1" class="box"><a href="" class="one"><p style="margin-top:2.5vh; font-size:1.25em;"><b>MOVIES</a></p></div>

另外，您的hrefs需要指向哈希，因此页面不会重定向。

（将所有href=""实例更改为href="#" ）

这是一种快速而肮脏的方式来做您想要的事情。 它有重复的代码，这不是最佳实践（不是DRY），但是可以解决问题。 我简化了js，css和html来显示概念。

javascript

$(document).ready(function() {

  // click box 1
  $("#sec1").click(function() {
    $(this).addClass('active');
    $("#sec2").removeClass('active');
    $("#sec3").removeClass('active');
    $("#sec4").removeClass('active');
  });

  // click box 2
  $("#sec2").click(function() {
    $(this).addClass('active');
    $("#sec1").removeClass('active');
    $("#sec3").removeClass('active');
    $("#sec4").removeClass('active');
  });  

  // click box 3
  $("#sec3").click(function() {
    $(this).addClass('active');
    $("#sec1").removeClass('active');
    $("#sec2").removeClass('active');
    $("#sec4").removeClass('active');
  });  

  // click box 4
  $("#sec4").click(function() {
    $(this).addClass('active');
    $("#sec1").removeClass('active');
    $("#sec2").removeClass('active');
    $("#sec3").removeClass('active');
  });  

});

的CSS

.box {
  text-align:center;
  top:9vh;
  left:0;
  background-color: #7d7e7d;
  display:inline;
  white-space:nowrap;
  overflow:hidden;
  margin: 3px;
  padding: 3px;
}

.active {
  background-color: green;
}

html

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

<span id="sec1" class="box">
  <a href="#">
    MOVIES
  </a>
</span>

<span id="sec2" class="box">
  <a href="#">
    MUSIC
  </a>
</span>

<span id="sec3" class="box" >
  <a href="#">
    RADIO
  </a>
</span>

<span id="sec4" class="box">
  <a href="#">
    COMICS
  </a>
</div>

</body>
</html>

http://jsbin.com/riranefuri/edit?html,css,js，输出

Answer 3

只需删除每个跨度的班级，然后将其添加到被单击的班级即可。

<script>
$(document).ready(function() {
        $("span.box").click(function() {
            $("span.box").removeClass('active');
            $(this).addClass('active');
        });
    });
</script>

但是，如果您希望使用a-tag遍历不同页面，则应通过服务器编程（而不是js将active类添加到适当的链接。