現在のページのナビゲーションタブの背景イメージを変更するCSSまたはJavascriptソリューションはありますか？

Question

JavaScriptを使用して、特定のURLまたはIDを使用しているかどうかをチェックするコードの条件付き部分を記述する方法はありますか？そうであれば、特定のタブの "オン"バックグラウンドイメージをロードしますか？

JavaScriptを使用せずにこれを行う簡単な方法はありますか？

ありがとうございました。

Answer 1

チェックアウトJQuery UI tabs これは、役に立つ可能性のあるカスタマイズとイベントをかなり許可します。 「リモートタブのコンテンツが読み込まれた後にトリガーされる」ロードイベントと同様です。その後、タブに置かれた画像を取り替えることができます。

Answer 2

はい、あります。私はこの答えを2つの部分に分けて、（含意された）質問の両方に取り組もうとします。 JavaScriptの可能性に言及する前に実際のマークアップを見たいのですが、

---

idは条件付き背景の変更をベースCSS、私はidがbodyタグであることを仮定しているが、その前提は、コード内で明示的ではないので、限り、それが持つ要素の祖先だと

#homePageId #tabToGoToHomePage { 
    background-image: url('path/to/homePageImage.png'); 
} 

#siteMapPageId #tabToGoToSiteMapPage { 
    background-image: url('path/to/siteMapPageImage.png'); 
} 

#contactPageId #tabToGoToContactPage { 
    background-image: url('path/to/contactPageImage.png'); 
} 

/* ...and so on... */ 

特定のページへのリンクを表す複数の要素がある場合、あなたは（明らかに、私は考えます）、これらの要素のためにとCSSでクラス名を使用することができます。これと同じアプローチがうまくいく関連idセレクタ。

---

URLベースの条件付きバックグラウンドの変更は、HTML構造に少し依存します。あなたのマークアップを投稿すると助けになるでしょう。

以下は、次のマークアップに基づいており、あなたの目を見ずに、私はより具体的な何かを提供することができません。これは、しかし、あなたの状況に適応する必要があります：

HTML：

<ul><!-- primary navigation --> 
    <li><a href="#" class="navigation goHome" data-link="home">Home</a></li> 
    <li><a href="#" class="navigation goAbout" data-link="about">About</a></li> 
    <li><a href="#" class="navigation goClients" data-link="clients">Clients</a></li> 
    <li><a href="#" class="navigation goContact" data-link="contact">Contact Us</a></li> 
</ul> 
<!-- other content --> 
<ul><!-- secondary navigation --> 
    <li><a href="#" class="navigation goHome" data-link="home">Home</a></li> 
    <li><a href="#" class="navigation goAbout" data-link="about">About</a></li> 
    <li><a href="#" class="navigation goClients" data-link="clients">Clients</a></li> 
    <li><a href="#" class="navigation goContact" data-link="contact">Contact Us</a></li> 
</ul> 

はJavaScript：

var tabs = document.getElementsByClassName('navigation'); 
var url = 'http://www.example.com/about/'; 
// in real life use something like: 
// var url = document.location; 

if (url.charAt(url.length-1) == '/') { 
    url = url.substr(0,url.length - 1); 
    // I'm assuming that the pages are all in their own directories, 
    // this gets rid of any trailing '/' characters 
} 
var curPage = url.split('/').pop().toLowerCase(); 

for (i=0; i<tabs.length; i++){ 
    if (tabs[i].getAttribute('data-link').toLowerCase() == curPage){ 
     tabs[i].style.backgroundColor = 'red'; 
     /* or: 
     tabs[i].style.backgroundImage = 'url("http://path/to/image.png")'; 
     */ 
    } 
} 

JS Fiddle demo。