Question

我希望将相同的样式应用于活动标签，就像悬停在上面一样（请参阅代码）。我是jQuery的新手，所以有人可以看看吗？

目前，只有悬停效果正常，但我希望活动标签保持白色并显示黑色文字。

<!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>

Answer 1

您正在添加一个类active，但该类没有css规则。

#tabs ul li.active a{color:black}

Answer 2

尝试

Fiddle DEMO

js 您的脚本的jQuery版本，带有所需的结果。

$(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;
}

将样式应用于活动选项卡

2 个答案: