javascript - 选择时如何更改颜色选项卡

Question

我想设置点击标签时的颜色。我的代码是:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab-1</a></li>
    <li><a href="#tabs-2">Tab-2</a></li>
    <li><a href="#tabs-3">Tab-3</a></li>
    <li><a href="#tabs-4">Tab-4</a></li>
    <li><a href="#tabs-4">Tab-5</a></li>
  </ul>
  <div id="tabs-1">
    <p></p>
  </div>
  <div id="tabs-2">
    <p></p>
  </div>
  <div id="tabs-3">
    <p></p>
  </div>
  <div id="tabs-4">
    <p></p>
  </div>
  <div id="tabs-5">
    <input type="hidden" id="hidden" value="1"/>
  </div>
</div>

怎么做？

var value= "#ui-id-";
  var nithin = value +''+ $('#hidden').val();
   $(nithin).click(function () {
     $(nithin).css('background','red');
     var hidden=(parseInt('#hidden').val())+1;
     $('#hidden').val(hidden);
  });

Answer 1

为名为“selected”的类添加了 CSS，用于设置背景颜色。使用 jQuery，您可以为选项卡设置点击处理程序，当它们被点击时，从所有选项卡中删除“selected”类，然后将其添加到被点击的选项卡中，如下所示:

$(document).ready(function(){
    $('#tabs ul li a').click(function(ev){
        $('#tabs ul li').removeClass('selected');
        $(ev.currentTarget).parent('li').addClass('selected');
    });
});

我创建了一个 fiddle 来演示这一点。我冒昧地对您的选项卡进行了一些样式设置，使它们看起来像选项卡。在这里查看:http://jsfiddle.net/d23Nk/