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>标记来帮助没有启用Javascript的用户。

问题

我该怎么做呢？

对于禁用javascript的用户，我想让他们点击＆＃34; Home＆＃34;或＆＃34;与我联系＆＃34;并被带到＆＃34; home.php＆＃34;或＆＃34; contact.php＆＃34;分别

Answer 1

这应该有效：

<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>

使用noscript，您可以添加另一个菜单，但无法更改可用的菜单。如上所述，没有js的人不会触发点击处理程序，默认get将被执行。如果启用了js，则会执行click功能，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的浏览器上支持JavaScript的浏览器不会在标记中呈现元素，并会显示scriptMenu列表。

Working example

Answer 3

请注意，这是一个快速试用版，代码 UNTESTED

将链接保留到锚点中的完整页面，并以编程方式删除“.php”

<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>

Answer 4

如何在＆＃34; a＆＃34;中添加实际链接作为href？标记，然后在jQuery中添加返回false结尾。如果Javascript被触发，这将停止浏览器执行href元素中指定的链接。如果Javascript未启用，则只需链接到href元素即可。不需要noscript。

<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>

Javascript禁用用户的备用导航菜单

4 个答案: