1

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>

How to do it?

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

3 回答 3

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/

于 2013-04-26T16:22:56.153 回答
0

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

于 2013-04-26T17:14:22.517 回答
0 
$('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 类以获得您想要的颜色

于 2013-04-26T16:13:27.500 回答