Question

我正在尝试更改所选href的背景，而不是为我工作。我可以在控制台日志中看到所选的href。有人可以如果我在代码中遗漏了任何内容，请帮助我理解？

 Below is my code:
 -----------------
 <style>
    .current {
        background-color: tomato;
   }
 </style>

  function getwlan() {
       $.ajax({
       url: '/getwlan',
       data: $('form').serialize(),
       type: 'POST',
       success: function(response){
         var wlan = JSON.parse(response);
         var options = "";
         var row = $('<tr>');
         var zone="<b>System Zones</b>";
         for (var i = 0; i < wlan.length; i++) {
           if (wlan[i].wlan_zone){
            z1=new Array (wlan[i].wlan_zone)
            zone += "<a href="+'"' +z1 +'"'+"><h5>"+ z1 + "</h5></a>";
             }
            } 
           $("#divzone").html(zone); 
           $('#divzone a').on('click', function(event) {
               event.preventDefault();
               var v=($(this).attr('href'));
               var s1= sessionStorage.setItem('zones', v);
               var s2=sessionStorage.getItem("zones");
               console.log(v)
               $(this).addClass('current');
               var section_id = $(this).attr('href');
               var section_color = $(section_id).css('background-color');
               $(this).css('background-color', section_color);

＆＃39;

Answer 1

按照这个例子，这与你的问题相关：

$('#divzone a').on('click', function(event) {
  event.preventDefault();
  $('#divzone a').removeClass('current');
  $(this).addClass('current');
  });

.current {
        background-color: tomato;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='divzone'>
  <a class='link'>href</a>
  <a class='link'>href</a>
  <a class='link'>href</a>
  <a class='link'>href</a>
  <a class='link'>href</a>
  <a class='link'>href</a>
  <a class='link'>href</a>
</div>

Answer 2

根据点击的链接更改链接背景，其中包含在点击链接的href属性中包含的部分ID的颜色。

＆＃13;

$('a').click(function(){
  $('a').css('background-color','');
  var sectionId = $(this).attr('href');
  var backgroundColor = $(sectionId).css('background-color');
  $(this).css('background-color', backgroundColor);
})

＆＃13;

  

  a{
      padding: 10px;
      margin-bottom: 10px;
    }
    
    div{
      
      height: 100px;
    }

    #sectionID1 {
      background-color: #337ab7;
    }

    #sectionID2 {
      background-color: #ffcc00;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#sectionID1">Section 1</a>
<a href="#sectionID2">section 2</a>

<div id="sectionID1">
  Section 1
</div>

<div id="sectionID2">
  Section 2
</div>

＆＃13;

Answer 3

尝试在.current background-color上添加！important以覆盖任何其他same / more important声明。

.current {
    background-color: tomato !important;
}

或者这个

#divzone a.current {
    background-color: tomato !important;
}

jquery css背景颜色不起作用

3 个答案: