使用 Javascript 更改背景图像时出现问题

Question

我正在尝试通过 JavaScript 单击链接时更改链接的背景图像。我有五个选项卡，当用户单击选项卡时，我希望该选项卡的背景图像更改为纯白色图像。其他四个选项卡应更改为灰色图像。

所以我的 CSS 如下：

.listingindex li a {
    background:url(../images/tabe-nomal.jpg) left top no-repeat;
    color:#333333;
    display: inline-block;
    text-decoration:none;
    width:229px;
    padding:14px 0px 14px 10px;
}

.listingindex li a:hover {
    background:url(../images/tabe-over.jpg) left top no-repeat;
}

我的代码如下所示：

<div class="listingindex">
                    <?php           
                    $catId = get_cat_id('featured');                
                    $childOf = 'child_of='.$catId;  
                    $subCats = get_categories($childOf);                

                    // Slice array so only 5 categories can be displayed.
                    $subCats = array_slice($subCats, 0, 5);

                    foreach ($subCats as $value) {
                        $subCatsStr .= $value->cat_ID.'|';                      
                    }                                               

                    foreach ($subCats as $subCat) {                         
                        ?>
                        <ul>
                            <li><a id="tab_<?=$subCat->cat_ID?>" href="javascript:toggle(<?=$subCat->cat_ID?>,'<?=$subCatsStr?>')"><?=$subCat->name?></a></li>
                        </ul>          

                        <ul id="thumbnails_<?=$subCat->cat_ID?>" class="listingarea">                           
                            <?php $query = new WP_Query('category_name='.$subCat->name.'&posts_per_page=9');
                                while( $query->have_posts() ) : $query->the_post();?>
                                <li>                                                                                                            
                                    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">                                      
                                        <?
                                        $id = $post->ID;                                        
                                        $filename = $_SERVER["DOCUMENT_ROOT"].'/xxxxxxx/xxxxxx/xxxxx/xxxxxx/images/thumbnails/image_'.$id.'.jpg';                                                                                                                                                                                                                           
                                        if (file_exists($filename)) {
                                            ?><img src="<?php echo $templateDir; ?>/images/thumbnails/image_<?=$id;?>.jpg" alt="Image_<?=$id;?>" /><?                                           
                                        }else{                                          
                                            ?><img src="<?php echo $templateDir; ?>/images/thumbnails/no_image.jpg" alt="No Image" /><?
                                        }?>                                         
                                    </a>
                                </li>
                            <?php endwhile; ?>                                                                                                             
                        </ul>                                                                                   
                    <?}?>                 
                </div>      

最后我的 JS 如下所示：

function toggle(catID, subCatsStr) {
        document.getElementById('thumbnails_'+catID).style.display = "block";
        document.getElementById('tab_'+catID).style.backgroundImage = "url(/images/tabe-over.jpg)";                     

        subCatsArr = subCatsStr.split('|');
        for (i = 0; i <= subCatsArr.length - 2; i++){
            if (subCatsArr[i] != catID){
                document.getElementById('thumbnails_'+subCatsArr[i]).style.display = "none";                
                document.getElementById('tab_'+catID).style.backgroundImage = "url(images/tabe-nomal.jpg) left top no-repeat";
            }           
        }           
    }

目前，此代码只是在单击选项卡时删除灰色图像 (tabe-nomal.jpg)。

任何帮助表示赞赏。

问候...

Answer 1

看起来您的 backgroundImage url 可能不正确 - 尝试使用与初始 css 规则中相同的路径 (../images/..)

Answer 2

为了最终解决问题，我必须指定完整路径名：

document.getElementById('tab_'+catID).style.backgroundImage = "url(http://www.xxxxxx.ie/xxxxxxx/wp-content/主题/xxxxxxx/images/tabe-over.jpg)";

不知道为什么，但这解决了问题。它是一个 WordPress 主题，所以也许这与它有关。