javascript - 如何将事件 CSS block 导航元素(跨度)设置为与使用 Javascript 和 "active"类不同的颜色？

Question

这让我很头疼。这是我的代码:

页面的这一部分使用单个 .php 文件和一些 CSS + php 来创建 3 个“面板”，这些面板显示在一个 block 元素中并像 3 个不同的页面一样四处导航，而实际上它们是只是被移动的页面的不同 block 。导航是 3 个简单的 href 链接，其中包含一个包含文本的 span 标签。问题是当特定“选项卡”处于事件状态时，我需要更改该跨度文本的颜色。请注意，我不是在谈论 css 函数 a:active 或类似的东西。我需要文本在 3 种不同的颜色之间交替。颜色 1 表示无事件状态:“product-reservation-btn-1”是这种颜色，除非 > 颜色 2 是 :hover 状态，目前正在工作，但最终颜色 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:在不泄露公司名称和违反我的保密协议(protocol)的情况下，这就是我能给你的全部。此 block 将“事件”类添加到 ID“product-reservation-step-btn”，具体取决于哪个按钮处于事件状态。但是，传递一个简单的 css 颜色:#8bcc3b；元素的参数以更改文本颜色。也不会创建一个 #product-reservation-steps 一个 span.active CSS block 并将它传​​递给我想要的事件状态颜色。

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

为了帮助你，我一直在捣乱，所以here is my fiddle ，我在此之前工作过的那个(经过大量编辑)，旨在改进您的 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");
    //}
}
}

尝试在脏标记网站上验证您的脚本

这个: 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/