Javascript 将样式应用于活动选项卡
我想在活动选项卡上应用与悬停时相同的样式（请参见代码）。我是jQuery的新手，有人能看一下吗 目前，只有悬停效果有效，但我希望活动选项卡保持白色，并有黑色文本Javascript 将样式应用于活动选项卡,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想在活动选项卡上应用与悬停时相同的样式（请参见代码）。我是jQuery的新手，有人能看一下吗 目前，只有悬停效果有效，但我希望活动选项卡保持白色，并有黑色文本 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <style type="tex
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<style type="text/css">
body {
height: 600px
}
h1 {
color: #CC0000;
font-family: arial;
font-size: 18px
}
a.examples {color:#CCCCCC}
a.examples:hover {color:black}
#tabs ul {
padding: 0px;
margin: 0px;
margin-left: 5px;
list-style-type: none;
}
#tabs ul li {
position: relative;
margin-top: 10px;
display: block;
margin-left: 2px;
margin-right: 2px;
line-height: 20px;
padding: 5px;
background-color: white;
z-index: 9999;
border: 1px solid #ccc;
-moz-border-top-left: 4px;
border-top-left: 4px;
-moz-border-top-right: 4px;
border-top-right-: 4px;
width: 130px;
background-color: #484848;
text-decoration: none;
text-align: center;
font-family: verdana;
font-weight: bold;
font-size: 11px;
display: inline-block;
clear: none;
float: left;
border-bottom: 1px solid #000000;
height: 60px;
margin-bottom: 10px;}
#tabs ul li:hover
{
background-color: white;
cursor: pointer;
font-size: 11px;
font-family: verdana;
font-weight: bold;
color: black;
border-bottom:white 1px solid;
height:60px
}
#tabs #Content_Area {
padding: 0 15px;
clear: both;
overflow: hidden;
line-height: 19px;
position: relative;
top: 20px;
z-index: 5;
font-size:11px;
}
.hidden { display: none; }
</style>
<script type="text/javascript">
function tab(tab) {
if(tab == 'tab1') {
document.getElementById('tab1').style.display = 'block';
document.getElementById('tab2').style.display = 'none';
document.getElementById('tab3').style.display = 'none';
document.getElementById('tab4').style.display = 'none';
}
if(tab == 'tab2') {
document.getElementById('tab1').style.display = 'none';
document.getElementById('tab2').style.display = 'block';
document.getElementById('tab3').style.display = 'none';
document.getElementById('tab4').style.display = 'none';
}
if(tab == 'tab3') {
document.getElementById('tab1').style.display = 'none';
document.getElementById('tab2').style.display = 'none';
document.getElementById('tab3').style.display = 'block';
document.getElementById('tab4').style.display = 'none';
}
if(tab == 'tab4') {
document.getElementById('tab1').style.display = 'none';
document.getElementById('tab2').style.display = 'none';
document.getElementById('tab3').style.display = 'none';
document.getElementById('tab4').style.display = 'block';
}
document.getElementById('li_tab1').setAttribute("class", "");
document.getElementById('li_tab2').setAttribute("class", "");
document.getElementById('li_tab3').setAttribute("class", "");
document.getElementById('li_tab4').setAttribute("class", "");
// document.getElementById(tab).style.display = 'block';
document.getElementById('li_'+tab).setAttribute("class", "active");
}
</script>
<div class="popupWindows">
<div id="header">
<h1>Title</h1>
</div>
<div id="tabs" style="height:120px">
<div style="border-bottom:1px solid #cccccc; height:81px;">
<ul>
<li id="li_tab1" onclick="tab('tab1')">
<a class="examples">1</a></li>
<li id="li_tab2" onclick="tab('tab2')">
<a class="examples">2</a></li>
<li id="li_tab2" onclick="tab('tab3')">
<a class="examples">3</a> </li>
<li id="li_tab2" onclick="tab('tab4')">
<a class="examples">4</a</li>
</ul>
</div>
</div>
<div id="Content_Area">
<div id="tab1">
content
</div>
<div id="tab2" class="hidden">
content
</div>
<div id="tab3" class="hidden">
content
</div>
<div id="tab4" class="hidden">
content </div>
</div>
无标题文件
身体{
高度：600像素
}
h1{
颜色：#CC0000；
字体系列：arial；
字号：18px
}
a、 示例{颜色：#CCCC}
a、 示例：悬停{color:black}
#标签ul{
填充：0px；
边际：0px；
左边距：5px；
列表样式类型：无；
}
#李国宝{
位置：相对位置；
边缘顶部：10px；
显示：块；
左边距：2倍；
右边距：2px；
线高：20px；
填充物：5px；
背景色：白色；
z指数：9999；
边框：1px实心#ccc；
-moz边框左上角：4px；
左上角边框：4px；
-moz边框右上角：4px；
右上边框-：4px；
宽度：130px；
背景色：#4848；
文字装饰：无；
文本对齐：居中；
字体系列：verdana；
字体大小：粗体；
字体大小：11px；
显示：内联块；
明确：无；
浮动：左；
边框底部：1px实心#000000；
高度：60px；
页边距底部：10px；}
#李：悬停
{
背景色：白色；
光标：指针；
字体大小：11px；
字体系列：verdana；
字体大小：粗体；
颜色：黑色；
边框底部：白色1px实心；
高度：60像素
}
#选项卡#内容_区域{
填充：0 15px；
明确：两者皆有；
溢出：隐藏；
线高：19px；
位置：相对位置；
顶部：20px；
z指数：5；
字体大小：11px；
}
.hidden{显示：无；}
功能选项卡（选项卡）{
如果（tab=='tab1'）{
document.getElementById（'tab1'）.style.display='block'；
document.getElementById（'tab2'）.style.display='none'；
document.getElementById（'tab3'）。style.display='none'；
document.getElementById（'tab4'）。style.display='none'；
}
如果（tab==“tab2”）{
document.getElementById（'tab1'）.style.display='none'；
document.getElementById（'tab2'）.style.display='block'；
document.getElementById（'tab3'）。style.display='none'；
document.getElementById（'tab4'）。style.display='none'；
}
如果（tab==“tab3”）{
document.getElementById（'tab1'）.style.display='none'；
document.getElementById（'tab2'）.style.display='none'；
document.getElementById（'tab3'）.style.display='block'；
document.getElementById（'tab4'）。style.display='none'；
}
如果（tab==“tab4”）{
document.getElementById（'tab1'）.style.display='none'；
document.getElementById（'tab2'）.style.display='none'；
document.getElementById（'tab3'）。style.display='none'；
document.getElementById（'tab4'）。style.display='block'；
}
document.getElementById（'li_tab1'）.setAttribute（'class'，'）；
document.getElementById（'li_tab2'）.setAttribute（'class'，“”）；
document.getElementById（'li_tab3'）.setAttribute（'class'，'）；
document.getElementById（'li_tab4'）.setAttribute（'class'，“”）；
//document.getElementById（tab.style.display='block'；
document.getElementById（'li_'+tab）.setAttribute（“class”，“active”）；
}
标题
-
一,
-
二,
-
三,
-
4试试看
jsjQuery版本的脚本以及所需的结果
$(document).ready(function () {
$('#tabs li[id^="li_tab"]').click(function () {
$(this).addClass('active').siblings().removeClass('active');
var id = this.id.replace('li_', '');
$('#' + id).show().siblings('div[id^=tab]').hide();
});
});
css
#tabs ul li.active a {
color:black
}
#tabs ul li.active{
background-color:white;
}
您正在添加一个类active
，但该类没有css规则
#tabs ul li.active a{color:black}
这是否因为您对jquery解决方案持开放态度而被标记为jquery
？否则，您的代码中没有jQuery用法。css a.examples:active{color:#000000；background color:white；}@AzizAhmadHamra欢迎帮助：）@TusharGupta您是如何制作上面的“小提琴演示”按钮的？有这样一个列表，你们可以在某处做吗？@bleeteddod Fiddle-Link