자바 스크립트를 사용할 수없는 사용자를위한 대체 탐색 메뉴

Question

JavaScript를 사용하여 해당 div를 숨기거나 표시하는 탐색 메뉴가 있다고 가정합니다.

<ul> 
<li><a href="#home">Home</a></li> 
<li><a href="#contact">Contact Me</a></li> 
</ul> 

<script> 

$("#tabs a").click(function(e){ 
    e.preventDefault(); 
    $(".toggle").hide(); 
    var toShow = $(this).attr('href'); 
    $(toShow).show(); 
}); 

</script> 

는 내가 자바 스크립트를 사용할 수없는 사용자를 용이하게하기 위해 <noscript></noscript> 태그를 사용한다 알고있다.

가 어떻게이 일을 가야한다 질문?

자바 스크립트를 사용할 수없는 사용자의 경우 '집'또는 '저에게 연락하기'를 클릭하고 '집 .php'또는 '연락처 .php'로 이동하도록 허용하고 싶습니다. 이처럼

Answer 1

이 작동합니다. 위와 같이하면 j가없는 사용자는 클릭 핸들러를 트리거하지 않고 기본 get이 실행됩니다. js가 활성화되면 클릭 기능이 실행되고 e.preventDefault은 브라우저가 다른 페이지로 리디렉션하지 못하도록합니다.

이 솔루션은 중복 메뉴를 필요로하지 않습니다. 일단 어떤 식 으로든 변경해야한다면, 실제로는 두 개 메뉴의 HTML을 변경해야합니다.

Answer 2

은 :

<ul id="scriptMenu" style="display:none"> 
    <li><a href="#home">Home</a></li> 
    <li><a href="#contact">Contact Me</a></li> 
</ul> 

<noscript> 
    <ul> 
     <li><a href="home.php">Home</a></li> 
     <li><a href="contact.php">Contact Me</a></li> 
    </ul> 
</noscript> 

<script> 
    $(function(){ 
     $("#scriptMenu").show() 
    }); 
</script> 

scriptMenu는 자바 스크립트를 지원하지 않는 브라우저에 표시되지 않습니다.
JavaScript를 지원하는 브라우저는 태그의 요소를 렌더링하지 않으며 scriptMenu 목록을 표시합니다.

Working example

Answer 3

이 빠른 재판이므로주의 해주십시오, 코드는 검증되지 않은

앵커의 전체 페이지에 대한 링크를 남겨하고,이

<ul> 
<li><a href="home.php">Home</a></li> 
<li><a href="contact.php">Contact Me</a></li> 
</ul> 

<script> 

$("#tabs a").click(function(e){ 
    e.preventDefault(); 
    $(".toggle").hide(); 
    var toShow = $(this).attr('href'); 
    toShow=toShow.split("."); 
    toShow=toShow[0]; 
    $("#"+toShow).show(); 
}); 

</script> 

프로그램 "에 .php"제거하다

Answer 4

"a"태그에서 href로 실제 링크를 추가 한 다음 jQuery add에서 끝에는 false가 반환됩니다. Javascript가 실행되면 href 요소에 지정된 링크를 실행하는 브라우저가 중지됩니다. Javascript가 활성화되어 있지 않으면 href 요소로 연결됩니다. noscript 필요 없음. 다른 메뉴를 추가 할 수 있습니다 NOSCRIPT으로

<ul> 
<li><a data-target="#home" href="home.php">Home</a></li> 
<li><a data-target="#contact" href="contact.php">Contact Me</a></li> 
</ul> 

<script> 

$("#tabs a").click(function(e){ 
    e.preventDefault(); 
    $(".toggle").hide(); 
    var toShow = $(this).data('target'); 
    $(toShow).show(); 
}); 

</script> 

을하지만, 사용할 수를 변경할 수 없습니다 :

<ul> 
<li><a href="home.php">Home</a></li> 
<li><a href="contact.php">Contact Me</a></li> 
</ul> 

<script> 
$("#tabs a").click(function(e){ 
    e.preventDefault(); 
    $(".toggle").hide(); 
    var toShow = $(this).attr('href'); 
    $(toShow).show(); 
    return false; 
});  
</script>