Question

我目前有一个使用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;将显示，反之亦然。

有可能吗？

Answer 1

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

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

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

1 个答案: