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

【问题标题】：How to change the color tab when selecting it选择时如何更改颜色选项卡
【发布时间】：2013-04-27 01:14:22
【问题描述】：

当我点击它时，我想设置标签的颜色。我的代码是：

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

【问题讨论】：

到目前为止你尝试了什么？
这不是和stackoverflow.com/questions/3745959/…类似吗？

标签： javascript jquery html css

【解决方案1】：

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

$(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/

【讨论】：

【解决方案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 类定义为您想要的颜色

【讨论】：

您是否为 .activeColor 添加了样式？喜欢背景颜色：红色

【解决方案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 有时间与它们交互之前添加类。

【讨论】：