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');
    });
});

我创造了一个小提琴来证明这一点。我冒昧地为你的标签设计样式，使它们看起来像标签。请在此处查看：http://jsfiddle.net/d23Nk/

Answer 2

$('div#tabs ul li a').click(function() {

    $(this).parents('div#tabs').children('div').removeClass('activeColor');
    var theHref = $(this).attr('href');
    $('div#' + theHref).addClass('activeColor');

});

然后只需定义这些CSS类以获得所需的颜色

Answer 3

CSS

#tabs ul li { float:left }
#tabs div { display:none; clear:both }
#tabs div.selected { display:block }

HTML

<div id="tabs">
    <ul>
        <li><a href="#tabs-1" class="selected">Tab-1</a></li>
        <li><a href="#tabs-2">Tab-2</a></li>
        <li><a href="#tabs-3">Tab-3</a></li>
      </ul>
      <div class="selected">tab 1 content</div>
      <div>tab 2 content</div>
      <div>tab 3 content</div>
</div>

JQuery的

$(document).ready(function(){
        $('#tabs ul li a').click(function(){
            $('#tabs ul li, #tabs div').removeClass('selected');
            var x = $(this).parent().index();
            $(this).parent().addClass('selected');
            $('#tabs div:eq('+x+')').addClass('selected');
            return false;
    });
});

不需要所有唯一ID，也不需要在javascript有时间与它们交互之前添加类。

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

3 个答案: