Javascript 使我的站点Noscript兼容

我几乎从零开始为自己建立了一个铭牌网站，这既是一种学习体验，也是一种正式的在线展示。我做了一个很酷的网站，至少，我认为它是一个使用AJAX和锚导航在标签之间切换的标签网站。我还创建了一个样式更改脚本，它使用cookies来记住您的样式选择

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

我的网站位于。我很感激你们提出的任何想法

---

可以命名背景颜色的人员将获得额外积分。

如果您担心关闭脚本的人员，则说明您使用了错误的设计过程；您应该创建一个没有脚本的站点，并在以后添加ajax/脚本增强功能

---

现在更改它将是相当困难的，但也许您可以使所有选项卡都成为常规链接，并制作某种模板，以显示正确的布局并读取所选选项卡的特定内容。

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

---

现在改变它将是相当困难的，但也许你可以让所有标签都成为常规链接，并制作某种模板，以显示正确的布局并阅读所选标签的具体内容。

我同意jeroen的观点，你想先用ajax构建网站，然后再添加js层

---

如果您将每个选项卡构建为自己的页面，并将页面内容放入具有特定id的div中，那么您可以非常轻松地使用jquery进行ajax调用，从页面中获取内容，只在保存内容的div中获取内容，然后将其放入主页中。所以，效果是一样的，但该网站也完全可以在没有脚本的情况下运行

我同意jeroen的观点，您希望首先使用ajax构建站点，然后添加js层

如果您将每个选项卡构建为自己的页面，并将页面内容放入具有特定id的div中，那么您可以非常轻松地使用jquery进行ajax调用，从页面中获取内容，只在保存内容的div中获取内容，然后将其放入主页中。所以，效果是一样的，但该网站也完全可以在没有脚本的情况下运行

1-将导航替换为： 当设备是手机或不支持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，则使用脚本div显示菜单内部导航

2-将页面更改为根据$\u 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>
...

而且它可以在旧设备中访问。 这是一个补救性解决方案，自项目实施以来，制定了良好的非强制性代码。

1-用以下代码替换导航： 当设备是手机或不支持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，则使用脚本div显示菜单内部导航

2-将页面更改为根据$\u 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>
...

而且它可以在旧设备中访问。

---

这是一个补救性的解决方案，从项目开始就制定了良好的非公开代码。

对我来说更像是一个5美元的问题：从实用的角度来看，不运行脚本的人很少值得设计。不过，我并没有质疑你的技术问题的正确性，这个项目将是学习渐进式增强的一个好项目。我完全不同意吉诃多的观点——残疾人和盲人是值得设计的，他们通常没有javascript；启用/禁用它甚至不是一个选择。在我的工作中，法律规定它必须符合508标准，这意味着javascript不能工作。对我来说，这更像是一个5美元的问题从实际的角度来看，那些

---

t运行的脚本很少值得设计。不过，我并没有质疑你的技术问题的正确性，这个项目将是学习渐进式增强的一个好项目。我完全不同意吉诃多的观点——残疾人和盲人是值得设计的，他们通常没有javascript；启用/禁用它甚至不是一个选择。在我的工作中，法律规定它必须符合508标准，这意味着javascript不能工作。