如何在选择颜色选项卡时更改它
如何在选择颜色选项卡时更改它
提问于 2013-04-27 00:10:14
当我点击标签时，我想设置标签的颜色。我的代码是：
<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);
});回答 3
Stack Overflow用户
发布于 2013-04-27 00:22:56
为设置背景颜色的名为"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/
Stack Overflow用户
发布于 2013-04-27 00:13:28
$('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类，使其具有您想要的颜色
Stack Overflow用户
发布于 2013-04-27 01:14:23
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有时间与之交互之前添加类。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16240781
复制相关文章
相似问题
腾讯云开发者
