Применение стиля к активным вкладкам

-1

Я хочу применить тот же стиль к активной вкладке, что и при зависании (см. Код). Я новичок в 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>

источник

2013-11-14 Webwoods Digital Agency

Связано это с 'jquery', потому что вы открыты для решения jQuery? В противном случае у вас не будет использования jQuery. –

css a.examples: active {color: # 000000; background-color: white;} – Gowsikan

Попробуйте

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

источник

2013-11-14 14:20:03

работал, спасибо большое! –

@AzizAhmadHamra Приветствую вас, счастлив помочь :) –

@TusharGupta как вы сделали кнопку «Fiddle DEMO» выше? Есть ли список таких вещей, которые вы можете сделать где-нибудь? – DelightedD0D

Вы добавляете класс active но не имеют правил CSS для этого класса.

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

источник

2013-11-14 14:23:18 charlietfl

Применение стиля к активным вкладкам

ответ

Смежные вопросы