单击 link 时如何使跨度更改颜色

Question

好的，所以我有 4 个跨度，我想要的是当我单击跨度中的 link 时，link 所在的跨度的颜色会发生变化。我也想要它，所以当点击跨度中的另一个 link 时，跨度会改变颜色，而之前点击的跨度会恢复到原来的颜色。抱歉，如果解释得不好。下面是我从另一个用户问的问题中得到的 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

我会使用方框 class 选择器而不是 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

只需从每个跨度中删除 class，然后将其添加到被点击的一个中。

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

但是，如果您希望使用 a-tags 遍历 不同的 页面，您应该添加 active class 到适当的 link通过您的服务器编程，而不是 js.

Answer 3

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

此处打开了一个 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>

此外，您的 href 需要指向哈希，这样页面才不会重定向。

（将 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,output

单击 link 时如何使跨度更改颜色

How can I make a span change color when a link is clicked

html

javascript

css

jquery