JavaScriptを使用して背景画像を変更する際の問題

Question

JavaScriptを使用してリンクをクリックしたときに背景画像を変更しようとしています。私は5つのタブと、ユーザーがタブをクリックすると、そのタブの背景イメージを白いイメージに変更したい。他の4つのタブは灰色のイメージに変更する必要があります。

だから、次のように私の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）が削除されます。

助けてください。あなたbackgroundImageのURLが正しくない可能性がありますように

Answer 1

のように（../images/ ...）同じパスを使用してみてください問題は最後に完全なパス名を指定する必要がありました：

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

理由はわかりませんが、これが問題を解決しました。そのWordpressのテーマは多分これに関係していました。

Answer 2

が見える

よろしく... - 解決するために、あなたの最初のCSSルール