使网站操作在 noscript 上工作答案

【问题标题】：Make website action work on noscript使网站操作在 noscript 上工作
【发布时间】：2023-03-28 22:16:01
【问题描述】：

我有一个网站必须使用禁用 javascript 的网络浏览器，这个网站有很多 jquery 动画来控制内容的显示。我已经在 <noscript> 标签内使用 <style> 使内容正确显示，以修改“显示”CSS 规则。

现在我被卡住了，当有人点击按钮时，我有一个表单，现在这个动作被一个修改“显示”值的 jquery 函数捕获，但我不知道该怎么做与 CSS 类似的东西。

我想到了使用 .button-class:active 规则之类的东西，但我需要修改另一个 CSS 规则以使其显示

这是一个例子

    .hide-div{
    width:300px;
    display:none;
    }

.mybutton:active {
How can I change ".hide-div" "display" value from here?
}

【问题讨论】：

.hide-div 在 .mybutton:active 内吗？
不确定是否可以。该按钮可以发出带有查询参数的 GET 请求，该参数标记应显示表单。然后在服务器端修改表单的类或显示值，或者在该点简单地将表单包含在标记中。
使表单默认显示（在 CSS 中无显示：无）并让脚本在页面加载时隐藏它。这样，如果脚本运行它会被隐藏并在点击时显示，但如果 JavaScript 被关闭，它仍然会显示。我相信这是“优雅退化”的正确方法。如果您愿意，我可以发布更详细的答案。

标签： html css noscript

【解决方案1】：

这是一种方法：

HTML

<a class="show">Show</a>
<div class="hidden">I'm hidden!
    <input type="text" /></div>

CSS

.hidden {
    display: none;
}
.show:active ~ .hidden, 
.hidden:hover {
    display: block!important;
}

说明：

~ 选择器，选择左元素的任何兄弟元素，在其自身之后。当按下按钮（或链接）时，会显示 div，而当用户悬停 div 时，表单将保持可见。

小提琴： https://jsfiddle.net/1y0jrzs9/9/

更新

您可以添加follow css规则，避免表单快速悬停，或者点击鼠标悬停。

.hidden:before {
    z-index: 999;
    content: "";
    display: block;
    position: relative; 
    top: -30px;
    height: 100px;
    width: 100px;
}

伪元素算作div的一部分，所以当它显示时，它被认为是悬停的。

【讨论】：

【解决方案2】：

这允许您使用隐藏输入来设置其他内容的样式，只要它是同级或在输入的同级内。在这种情况下，输入显示表单元素。因为输入是隐藏的，所以看起来你在标签中输入的任何内容都会触发更改：

HTML

<div class="switchContainer">
    <label for="hiddenInput1" onclick><button>Show the form</button></label>
    <input type="radio" id="hiddenInput1" value="shown" />
    <form>I'm a form this time but could be anything really</form>
</div>

空的 onclick 是为了确保它在 iOS

CSS

/* hide the input */
.switchContainer input[type=radio] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.switchContainer label {
    display: inline-block;
    cursor: pointer;
}

/* Default State of altered element */
.switchContainer form {
    background: #f5f5f5;
    border: 1px solid #aaa;
    margin: 1ex 0;
    padding: 1.6em;
    display: none;
}

/* 'checked' styles for altered element */
.switchContainer input[type=radio]:checked ~ form {
    display: block;
}

还有一点需要注意的是 CSS：

body {
    -webkit-animation: bugfix infinite 1s; 
}
@-webkit-keyframes bugfix { 
  from {padding:0;} 
  to {padding:0;} 
}

需要确保它适用于 Android

https://jsfiddle.net/mLyjk9r4/

在上面的示例中，您只能显示元素（不能取消选中单选） - 如果您希望能够切换它，您可以使用一个复选框，让您取消选中恢复样式的项目（在此再次隐藏表单）

https://jsfiddle.net/1L8pmb90/

玩起来似乎非常多才多艺和有趣

https://jsfiddle.net/ks38r6v9/

取自：

http://timpietrusky.com/advanced-checkbox-hack

【讨论】：