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网址可能不正确 - 尝试使用与初始css规则相同的路径（../ images / ..）

Answer 2

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

document.getElementById（'tab _'+ catID）.style.backgroundImage =“url（http://www.xxxxxx.ie/xxxxxxx/wp-content/themes/xxxxxxx/images/tabe-over.jpg）” ;

不确定原因，但这解决了问题。它是一个Wordpress主题，所以也许这与它有关。

使用Javascript更改背景图像的问题

2 个答案: