用noscript做有条件的事情

本文关键字：有条件 noscript | 更新日期: 2023-09-27 18:29:44

你好，

我在javaScript文件中有一个函数。我有10个按钮会触发这个功能来做一些基于按钮名称的事情。代码如下：

function doSomething( name ){
  switch(name){
    case "1";
      alert("i am 1");
      break;
    case "2";
      alert("i am 1");
      break;
   // and so on...
  }
}

这个doSomething工作正常。但是，当noscript或JavaScript被禁用时，我想提醒其他事情。

我做了一些类似的事情：

<noscript>
  // if click on button 1, display <image src="image/img1" />
  // if click on button 2, display <image src="image/img2" />
  // and so on..
  // I would like display different image when different button clicked.
</noscript>

请告知。

用noscript做有条件的事情

不可能。HTML5本身只是一个文档结构，CSS3提供了样式。也就是说，HTML5没有任何行为，因此，如果没有JavaScript，您将无法与文档交互。

如果JavaScript被禁用，并且您提供了<noscript>元素，那么您应该告诉用户，如果没有JavaScript，您的Web应用程序将无法工作。

您可以在css中执行类似复选框破解的操作，在隐藏的div中显示消息，将标签设置为按钮样式。

input[type=checkbox] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
 
label {
    
    background: #08C;
    padding: 5px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 2px;
    color: white;
    font-weight: bold;
}
 .to-be-changed {display:none;}
input[type=checkbox]:checked ~ .to-be-changed {
    display:block;
	margin-top:30px;
	font-size:120%;
	color:red;
}
<noscript>
		<div id="buttons">
		<input type="checkbox" id="button1"><label for="button1">button 1</label>
		<input type="checkbox" id="button2"><label for="button2">button 2</label>
		<input type="checkbox" id="button3"><label for="button3">button 3</label>
	<div class="to-be-changed"> You need to have javascript activated for the buttons to work !</div>
		</div>
</noscript>

显然，关闭js可以使其正常工作。这是我从Css点击事件

获得信息的页面链接
相关文章：