当JS被禁用时,使用noscript修改html元素和重定向页面?

时间:2016-08-05 23:08:49

标签: javascript html css noscript

我目前有一个使用jQuery UI手风琴的修改版本的页面。链接供jQuery UI手风琴参考:https://jqueryui.com/accordion/

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>abc</p>
  </div>

  <h3>Section 2</h3>
  <div>
    <p>def</p>
  </div>
</div>

对于我的页面,如果我正在点击网址:

  

www.whatever.com/getWater

我将到达&#34;第1节&#34;很活跃。

如果我正在点击网址:

  

www.whatever.com/getFood

我将到达&#34;第2节&#34;很活跃。

这个页面在禁用JS时不起作用,我需要确保页面在JS被禁用时至少仍然具有基本功能。

所以问题:

假设我在/getWater时禁用了JS,&#34;第1节&#34;是活动的,内容显示,我将无法点击&#34;第2节&#34;在没有JS的情况下扩展第2节的内容。

所以目前我认为一个可能的解决方案就是当我们检测到页面被JS禁用时,使用<noscript><h3>标记更改为链接,即<a>标记

所以它成为了这个(或者它应该是什么,我是一个菜鸟):

<div id="accordion">
  <a>Section 1</a>
  <div>
    <p>abc</p>
  </div>

  <a>Section 2</a>
  <div>
    <p>def</p>
  </div>
</div>

<noscript>中,我添加的链接可以引导我/getFood所以&#34;第2节&#34;将显示,反之亦然。

有可能吗?

1 个答案:

答案 0 :(得分:0)

如果你做这样的事情怎么样?

<noscript>中添加显示a并隐藏h3的css,并检查以下代码:

<div id="accordion">
  <h3>Section 1</h3>
  <a>Section 1 </a> 
  <div>
    <p>abc</p>
  </div>

  <h3>Section 2</h3>
  <a>Section 2</a> 
  <div>
    <p>def</p>
  </div>
</div>
<style>
	a{display:none;}
</style>


<noscript>
	<style>
	a{display:block !important} 
	h3 {display:none}
	</style> 
</noscript>