2017-03-11 3 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에 처음 익숙하다. 그래서, 내가 준 스크립트로 자바 스크립트 파일을 만들 수 있습니까? HTML 섹션 에 추가 하시겠습니까? 따라서 메뉴 항목을 숨기거나 표시 할 때마다 myjava 만 편집합니다. 그런 식으로 작동합니까? –

+0

네, 이걸 할 수 있어요. 코드를 업데이트하고 window.onload 함수를 추가했습니다. – Daniel