如何將活動CSS塊導航元素（跨度）設置為與使用Javascript和“活動”類不同的顏色？

Question

這讓我頭疼不已。 這是我的代碼：

頁面的此部分使用單個.php文件和一些CSS + php進行布局，以創建顯示在塊元素中的3個“面板”，並像3個不同的頁面一樣瀏覽，而實際上它們只是不同的塊頁面的移動。 導航是3個簡單的href鏈接，其中包含一個span標記以包含文本。 問題是，當該特定的“選項卡”處於活動狀態時，我需要更改該跨度文本的顏色。 注意，我不是在說css函數a：active或類似的東西。 我需要文本在3種不同的顏色之間交替。 顏色1表示無活動狀態：除非>顏色2是：hover狀態（當前正在工作），否則顏色為“ product-reservation-btn-1”是該顏色，但最終顏色3為活動狀態，其中“ $ css_step_2_tab”為當前選擇的選項卡，跨度文本將變為顏色3，直到選擇了另一個選項卡。 有任何想法嗎？ 這讓我發瘋！

CSS：

#product-reservation-steps a span{
text-align:center;
color:#ffffff;
font-family: 'latoregular','arial','serif';
font-size:1.8em;
line-height:48px;
text-decoration:none;
color: #b6b7b7;
}

#product-reservation-steps a span:hover {
color: #f19c23;
}

#product-reservation-step-1-btn{
display:block;
position:absolute;
top:0;
left:5;
z-index:1;
width:300px;
height:48px;
text-align:center;
text-decoration:none;   
}

#product-reservation-step-1-btn.active{ 
font-style: oblique;    
}

#product-reservation-step-1-btn:hover{  
text-decoration:none;   
}

#product-reservation-step-2-btn{
display:block;  
position:absolute;
top:0;
left: 320px;
z-index: 2;
width: 278px;
height:48px;
text-align:center;
text-decoration:none;       
}

#product-reservation-step-2-btn.active{
font-style: oblique;    
}

#product-reservation-step-2-btn:hover{  
text-decoration:none;   
}

#product-reservation-step-3-btn{
display:block;  
position:absolute;
top:0;
left:573px;     
z-index:1;  
width:300px;
height:48px;
text-align:center;  
text-decoration:none;   
}

#product-reservation-step-3-btn.active{ 
font-style: oblique;    
}

#product-reservation-step-3-btn:hover{  
text-decoration:none;   
}

HTML：

<!-- begin steps -->
<?php
// default step to open on load
$css_step_1_tab = '';
$css_step_2_tab = '';
$css_step_3_tab = '';

$css_step_1_panel = 'style="display:none;"';
$css_step_2_panel = 'style="display:none;"';
$css_step_3_panel = 'style="display:none;"';

switch($_GET["step"]){
case 3:
$css_step_3_tab = 'class="active"';
$css_step_3_panel = 'style="display:block;"';
break;
case 2:
$css_step_2_tab = 'class="active"';
$css_step_2_panel = 'style="display:block;"';
break;
case 1:
default:
$css_step_1_tab = 'class="active"';
$css_step_1_panel = 'style="display:block;"';
break;
}
?>

<div id="product-reservation-steps">

<a href="javascript:picturebooth_step(1);" id="product-reservation-step-1-btn" <?php echo $css_step_1_tab; ?>><span>Customize your booth</span></a>
<div id="arrow-left"><img src="<?php echo get_template_directory_uri(); ?>/images/arrow-right.png" /></div>
<a href="javascript:picturebooth_step(2);" id="product-reservation-step-2-btn" <?php echo $css_step_2_tab; ?>><span>Billing & Shipping</span></a>
<div id="arrow-right"><img src="<?php echo get_template_directory_uri(); ?>/images/arrow-right.png" /></div>
<a href="javascript:picturebooth_step(3);" id="product-reservation-step-3-btn" <?php echo $css_step_3_tab; ?>><span>Confirmation</span></a>
<div style="clear:both;"></div>

</div>
<!-- end steps -->

Javascript：這就是我所能給您的，而無需透露公司名稱和破壞我的保密協議。 該塊根據哪個按鈕處於活動狀態將“活動”類添加到id“ product-reservation-step-btn”中。 但是，傳遞一個簡單的CSS顏色：＃8bcc3b; 元素的參數以更改文本顏色。 創建＃product-reservation-step也不會跨過span.active CSS塊並將其傳遞給我想要的活動狀態顏色。

// reset tabs and divs
for(i=1 ; i<=total_steps ; i++){
$('#product-reservation-step-'+i).hide();

if($('#product-reservation-step-'+i+'-btn').hasClass("active")){
$('#product-reservation-step-'+i+'-btn').removeClass("active");
}
}
$('#product-reservation-step-'+step).fadeIn("fast");
$('#product-reservation-step-'+step+'-btn').addClass("active");

任何幫助，建議或建議，深表感謝！

Answer 1

我一直在忙着為您提供幫助，所以這里有我的小提琴 ，我在此之前（經過大量編輯）曾致力於改善您的UI並壓縮html / css。

這是新的CSS，帶有一些很酷的“前綴”選擇器：

#product-reservation-steps a{
text-align:center;
font-family: 'latoregular','arial','serif';
font-size:1.8em;
line-height:48px;
text-decoration:none;
color: #b6b7b7;
}

#product-reservation-steps a:hover {
    color: #f19c23;
}

[id^="product-reservation-step-"] {
    /* could all this maybe go into '#product-reservation-steps a' ? */ 
    display:block;  
    position:absolute;
    top:0;
}


[id^="product-reservation-step-"].active{  
/* this is how you select prefixes: */
/* element[attribute^="first part of the attribute value"] */
    font-style: oblique;
    color:red;
}

[id^="product-reservation-step-"]:hover{  
    text-decoration:none;   
}

#product-reservation-step-1-btn{
    left:5;
    z-index:1;
    width:300px;  
}

#product-reservation-step-2-btn{
    left: 320px;
    z-index: 2;
    width: 278px;   
}

#product-reservation-step-3-btn{
    left:573px;     
    z-index:1;  
    width:300px; 
}

我編輯了JavaScript，它可能會或可能不會幫助...

// reset tabs and divs
var prodres = '#product-reservation-step-';
var btn = '-btn';
for (i = 1; i <= total_steps; i++)
{
//$("a[class|='product-reservation-step-']").click(function()
//{
$(prodres + i + btn).hide();
if ($(prodres + i).hasClass("active"))
{
    $(prodres + i + btn).removeClass("active");
}
else
{
    $(prodres + step).fadeIn("fast");
    $(prodres + step + btn).addClass("active");
    //}
}
}

嘗試在dirtymarkup站點上驗證腳本

這：a [class | ='product-reservation-step-']是您通過對象前綴選擇對象的方式，認為這樣做可能會有所幫助。

還可以將引用轉換為變量，這應該使事情變得容易。

另外，您是否嘗試過使用：focus？ 一旦單擊鼠標在其他地方或按下Tab鍵，此操作就不會保留。

這是來自W3Schools：

input:focus
{
background-color:yellow;
}

<p>Click inside the text fields to see a yellow background:</p>

<form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />
</form>

盡管這可能無濟於事，但前一陣子我做了類似的事情：

http://leeli.co.uk/bengoddard/demos/ovalistic/

Answer 2

這是從http://jqueryui.com/tabs/

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</body>
</html>

...可能是您最簡單的解決方案...

Answer 3

再次回來！ 試試這個...比我想象的要簡單得多！

jQuery的：

$('#menu li a').click(function(){
$('#menu li a').removeClass('selected'); // remove selected from any other item first
$(this).addClass('selected'); //add selected to the one just clicked.
});

CSS：

a {
    font-size: 24px;
    color: blue;
    font-family: 'Open Sans';
}

a:hover {
    font-weight: bolder;
    color: blue;
}

a:link {
    color: red;
}

a:visited {
    color: grey;
}

a:active {
    color: #90EE90;
    transition: color .03s .0s linear;
}

.selected {
    border: solid 1px #000;
    color: orange;
}

.selected span {
    color: #FF0;
}

http://jsfiddle.net/benji/9Qxdz/25/ http://jsfiddle.net/benji/xcbGh/8/