1 - 用此替换导航：

Question

我几乎已经从零开始为自己建立了一个铭牌网站，既可以作为学习经验，也可以正式将我的存在放在网上。我制作了一个很酷的（至少，我认为是这样）选项卡式网站，它使用AJAX和锚点导航在标签之间切换。我还整理了一个改变风格的脚本，它使用cookie记住你的风格选择。

现在，这个价值64,000美元的问题：如何让这个网站对那些选择关闭JavaScript的用户有用？目前，没有脚本的用户可以看到“关于我”部分，而不是其他内容。我还在顶部放了一个横幅，将它们指向我的“noscript”页面，该页面目前尚不存在。最好的选项是一次显示所有内容的noscript页面吗？是否有一种CSS方法可以避免JavaScript切换选项卡？或者，是否有一些方法可以在没有脚本的情况下向用户显示主页面上的所有内容，但仍然为其他人提供脚本增强版本？

我的网站位于scolbyme.webs.com。我感谢你们提出的任何想法！

P.S。可以为背景颜色命名的人的奖励积分。

Answer 1

如果您担心关闭脚本的人员，您使用了错误的设计程序;你应该创建一个没有脚本的网站，并在以后添加ajax /脚本增强功能。

现在更改它会非常困难，但也许您可以使所有选项卡定期链接并制作某种模板，以显示正确的布局并阅读所选选项卡的特定内容。

Answer 2

我同意jeroen，你想先建立网站（w / out ajax），然后在js层添加。

如果您将每个标签构建为自己的页面，并将页面内容放入具有特定ID的div中，您可以非常轻松地执行ajax调用w / jquery，可以从页面抓取内容并仅抓取在包含内容的div中，然后将其放入主页面。所以，同样的效果，但该网站也可以完全没有脚本。

Answer 3

1 - 用此替换导航：

<noscript>
    <nav>
        <div id="twitternav"><a href="?r=twitter">Twitter</a></div>
        <div id="tumblrnav"><a href="?r=tumblr">Tumblr</a></div>
        <div id="flickrnav"><a href="?r=flickr">Flickr</a></div>
        <div id="facebooknav"><a href="?r=facebook">Facebook</a></div>
        <div id="devnav"><a href="?r=dev">Dev</a></div>
        <div class="active" id="aboutnav"><a href="?r=about">About Me</a></div>
    </nav>
</noscript>
<div id="nav_with_script"></div>

当设备是手机或不支持javascript时，noscript显示另一个菜单，你的链接将是？r = twitter而不是#twitter。最后一个div是使用javascript的菜单的容器。您可以通过推送此代码内部标记来填充此内容：

<script type="text/javascript">
document.getElementById('nav_with_script').innerHTML = '<nav><div id="twitternav"><a href="#twitter">Twitter</a></div><div id="tumblrnav"><a href="#tumblr">Tumblr</a></div><div id="flickrnav"><a href="#flickr">Flickr</a></div><div id="facebooknav"><a href="#facebook">Facebook</a></div><div id="devnav"><a href="#dev">Dev</a></div><div class="active" id="aboutnav"><a href="#about">About Me</a></div></nav>';
</script>

如果设备没有javascript支持，则noscript将显示而不执行。如果设备支持javascript显示菜单内部nav_with_script div。

2 - 根据$ _GET ['r']

更改您的页面以显示内容

这样的事情：

<div id="twitter"<?php if($_GET['r'] == 'twitter') { echo ' class="active"'}?>></div>
<div id="thumblr"<?php if($_GET['r'] == 'thumblr') { echo ' class="active"'}?>></div>
...

它可以在旧设备中访问。这是一个补救性的解决方案，自项目以来就制定了良好的不起作用的代码。

使我的网站Noscript兼容

3 个答案:

1 - 用此替换导航：

2 - 根据$ _GET ['r']