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

我想单击它时设置选项卡的颜色。我的代码是：如何在选择时更改颜色选项卡

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

来源

2013-04-26 Niths

到目前为止你试过了什么？ – 2013-04-26 16:10:47

我编辑我的代码 – Niths 2013-04-26 16:12:48

是不是类似于http://stackoverflow.com/questions/3745959/change-color-of-selected-menu-tab?rq=1？ – oomlaut 2013-04-26 17:39:53

$('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-26 16:13:27

进行了编辑，使其对锚点标记上的点击作出响应 – 2013-04-26 16:18:38

但它不适用于我的代码 – Niths 2013-04-26 16:21:15

您是否为.activeColor添加样式？像背景颜色：红色 – 2013-04-26 16:22:14

一类增加的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/

来源

2013-04-26 16:22:56 michaelday

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-26 17:14:22 Dawson

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

回答

相关问题