2017-03-11 4 views
0

は、私はすべてが同じメニューなので、上のメニュー項目をすべてのページで自動的に非表示にするにはどうすればよいですか?

<ul class="nav-menu"> 
        <li><a href="page1.html">Page1</a></li> 
        <li><a href="page2.html">Page2</a></li> 
        <li><a href="page3.html">Page3</a></li> 
        <li><a href="page4.html">Page4</a></li> 
       </ul> 

とのようなものを持っている、ウェブサイト、約10 HTMLページを持っています。

ここでは、いずれかのページがイベントページであるため、イベントがない場合は非表示にしたいと考えています。 私は一つだけの場所でこのスタイル属性を追加または削除したいと思いますが、それは自動的に他のページに変更する必要がありますので、私はそれを手動で行う必要はありませんスタイルプロパティ

<li style="display:none;"><a href="page1.html">Page1</a></li> 

を使用します全部で10ページ(およびサブページ)

これは可能ですか? アドバイスをお待ちしております! :) ありがとう!あなたのページは、ページを変更するたびにリロードされた場合

答えて

0

は、することができ、これを使用するには:

window.onload = function() { 
 
    var url = window.location.href; 
 
    var parts = url.split('/'); 
 
    var page = parts[parts.length - 1]; 
 
    
 
    switch(page){ 
 
    case 'page1.html': 
 
     document.getElementById('p1').style.display = 'none'; 
 
     break; 
 
    case 'page2.html': 
 
     document.getElementById('p2').style.display = 'none'; 
 
     break; 
 
    case 'page3.html': 
 
     document.getElementById('p3').style.display = 'none'; 
 
     break; 
 
    case 'page4.html': 
 
     document.getElementById('p4').style.display = 'none'; 
 
     break; 
 
    } 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="Here js file route"></script> 
 
    </head> 
 
    <body> 
 
    <ul class="nav-menu"> 
 
     <li id="p1"><a href="page1.html">Page1</a></li> 
 
     <li id="p2"><a href="page2.html">Page2</a></li> 
 
     <li id="p3"><a href="page3.html">Page3</a></li> 
 
     <li id="p4"><a href="page4.html">Page4</a></li> 
 
    </ul> 
 
    </body> 
 
</html>

+0

こんにちは!私はwebdesignの新しいです。だから、あなたが私に与えたスクリプトでjavascriptファイルを作成するのですか? HTML セクションに追加しますか?だから私はメニューアイテムを隠す/表示する必要があるたびにmyjavaを編集するだけです。それはそのように機能しますか? –

+0

はい、このようにすることができます。私はコードを更新し、window.onload関数を追加しました – Daniel

関連する問題