如何在选择时更改颜色标签 [英] How to change the color tab when selecting it

问题描述

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

I want to set the color of tab when I click on it. My code is :

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

推荐答案

背景颜色。使用jQuery，您可以为您的选项卡设置点击处理程序，当他们被点击时，从所有选项卡中删除选定类，然后将其添加到被点击的类，如下：

Added css for a class called "selected" that sets the background color. Using jQuery, you can set up a click handler for your tabs, and when they are clicked, remove the "selected" class from all the tabs, and then add it to the one that was clicked, like so:

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

I created a fiddle to demonstrate this. I took the liberty of styling your tabs a little bit to make them look like tabs. Check it out here: http://jsfiddle.net/d23Nk/

这篇关于如何在选择时更改颜色标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！