Question

我已经编写了这段代码来获得结果，点击Anchor链接时，div下面的div的背景颜色会发生变化。

<script type="text/javascript"> 
$("#l-button").on("click", function() {
    $("#m-under").css("background", "grey");
    $("#l-under").css("background", "blue");
});
$("#m-button").on("click", function() {
    $("#m-under").css("background", "blue");
    $("#l-under").css("background", "grey");
});
</script>

但是，它没有用。 Div的背景颜色在点击按钮时不会改变。任何人都可以指出我做错了什么。

附加代码（HTML）

<div class="row">
 <div id="m-container" class="col-xs-6">
  <div id=m-container-2">
   <a id="m-button" href="#15178671677277-96tu3e-3487" data-vc-tabs="" data-vc-container=".vc_tta">
    <span class="vc_tta-title-text">Mobile</span>
    <div id="m-underline-div"></div>
   </a>
  </div>
 </div>
 <div id="l-container" class="col-xs-6">
  <a id="l-button" href="#151746716339-c6ryaabc-d953" data-vc-tabs="" data-vc-container=".vc_tta">
   <span class="vc_tta-title-text">Laptop</span>
   <div id="l-underline-div"></div>
  </a>
 </div>
</div>

更新：将JS更改为以下（但颜色不变）

jQuery(document).ready(function($){
$("#l-button").on("click", function() {
    $("#m-underline").removeClass('bluecolorbg');
    $("#m-underline").addClass('greycolorbg');
    $("#l-underline").removeClass('greycolorbg');
    $("#l-underline").addClass('bluecolorbg');  

});

$("#m-button").on("click", function() {
    $("#m-underline").removeClass('greycolorbg');
    $("#m-underline").addClass('bluecolorbg');
    $("#l-underline").removeClass('bluecolorbg');
    $("#l-underline").addClass('greycolorbg')

});
});

CSS：

.greycolorbg{
    background-color:#c3c3c3;
    background:#c3c3c3;
}
.bluecolorbg{
    background-color:#236df1;
    background:#236df1;
}

更新：由于某种原因，.click正在使事情有效，而不是.on

$("#l-button").click(function() {

Answer 1

将$("#id").css("background", color);更改为$("#id").css("background-color", color);
请参阅此处的参考：https://www.w3schools.com/jquery/jquery_css.asp

Answer 2

＆＃13;

$("#l-button").on("click", function() {
    $("#l-container").css("background", "grey");
    $("#m-container").css("background", "blue");
});
$("#m-button").on("click", function() {
    $("#l-container").css("background", "blue");
    $("#m-container").css("background", "grey");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
 <div id="m-container" class="col-xs-6">
  <div id=m-container-2">
   <a id="m-button" href="#15178671677277-96tu3e-3487" data-vc-tabs="" data-vc-container=".vc_tta">
    <span class="vc_tta-title-text">Mobile</span>
    <div id="m-underline-div"></div>
   </a>
  </div>
 </div>
 <div id="l-container" class="col-xs-6">
  <a id="l-button" href="#151746716339-c6ryaabc-d953" data-vc-tabs="" data-vc-container=".vc_tta">
   <span class="vc_tta-title-text">Laptop</span>
   <div id="l-underline-div"></div>
  </a>
 </div>
</div>

＆＃13;

请尝试这个演示。希望这会对你有所帮助。

欲了解更多信息，

Change div background color on link click

Answer 3

我会做一个不同的方法。相反，使用ID，我会给它一个类名，您可以轻松插入或删除项目，并且您的JS代码不必更改。

<a id="m-button" href="#15178671677277-96tu3e-3487" data-vc-tabs="" data-vc-container=".vc_tta" class="btn-anchor">
    <span class="vc_tta-title-text">Mobile</span>
    <div id="m-underline-div" class="underline-div"></div>
</a>

那你的JS：

$(".btn-anchor").on("click", function() {
    $( '.underline-div' ).css("background", "grey");
    $( this ).parent().find('.underline-div').css("background", "blue");
});

＆＃13;

$(".btn-anchor").on("click", function() {
    $( '.underline-div' ).css("background", "grey");
    $( this ).parent().find('.underline-div').css("background", "blue");
});

＆＃13;

.underline-div {
    height: 5px;
    background-color: grey;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
 <div id="m-container" class="col-xs-6">
  <div id="m-container-2">
   <a id="m-button" href="#15178671677277-96tu3e-3487" data-vc-tabs="" data-vc-container=".vc_tta" class="btn-anchor">
    <span class="vc_tta-title-text">Mobile</span>
    <div id="m-underline-div" class="underline-div"></div>
   </a>
  </div>
 </div>
 <div id="l-container" class="col-xs-6">
  <a id="l-button" href="#151746716339-c6ryaabc-d953" data-vc-tabs="" data-vc-container=".vc_tta" class="btn-anchor">
   <span class="vc_tta-title-text">Laptop</span>
   <div id="l-underline-div" class="underline-div"></div>
  </a>
 </div>
 
 <h1>More Itens options</h1>
 <div id="n-container" class="col-xs-6">
  <a id="n-button" href="#url01" data-vc-tabs="" data-vc-container=".vc_tta" class="btn-anchor">
   <span class="vc_tta-title-text">Desktops</span>
   <div id="n-underline-div" class="underline-div"></div>
  </a>
 </div>
 <div id="o-container" class="col-xs-6">
  <a id="o-button" href="#url04" data-vc-tabs="" data-vc-container=".vc_tta" class="btn-anchor">
   <span class="vc_tta-title-text">Printers</span>
   <div id="o-underline-div" class="underline-div"></div>
  </a>
 </div>
</div>

＆＃13;

点击Anchor链接，更改div

3 个答案: