0

假设我有一个导航菜单，它使用 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 的用户，我希望允许他们单击“主页”或“联系我”并分别转到“home.php”或“contact.php”。

4

4 回答 4

4

这应该有效：

<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的人不会触发click handler，默认get会被执行。如果启用了 js，则会执行 click 函数并e.preventDefault阻止浏览器重定向到另一个页面。

该解决方案也不需要重复的菜单。一旦您需要以某种方式更改它，您实际上将需要更改两个菜单的 HTML，而不是一个。

于 2012-12-05T12:08:51.763 回答
1

像这样：

<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列表。

工作示例

于 2012-12-05T12:05:12.247 回答
1

请注意，这是一个快速试用，代码未经测试

将指向完整页面的链接保留在锚点中，并以编程方式删除“.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>
于 2012-12-05T12:06:10.613 回答
0

将实际链接添加为“a”标记中的 href 怎么样，然后在 jQuery 中添加 return 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>
于 2012-12-05T12:07:56.210 回答