6

是否可以在不使用任何 javascript 的情况下创建一个在单击各种元素时更改的页面并将多个事件绑定到页面的各种元素？

4

3 回答 3

16

是的，有多种方法可以做到这一点，可以使用 :focus、:active、:checked 来完成。查看演示。

以下是一个使用 :checked 的示例，为什么我选择它而不是其他的，因为它简化了编写 css 规则并允许我使用多个元素从不同的地方与之交互。但说够了，html：

<input type="checkbox" id="cb1" /><span>This will change color</span>

和CSS：

span { color: red; }
input:checked + span { color: blue; }

你可能会说复选框很难看，而且它们在所有浏览器上看起来都不一样，这是真的，但你不必显示它们，你可以使用带有 for 属性的标签来影响复选框的状态，对于前面的示例，这可以通过以下方式实现：

<label for="cb1">Click here to toggle checkbox</label>

好的，但是现在您可能认为事情变得复杂了，因为您使用了 2 个元素而不是 1 个，是的，但同时，由于<label for="id">通过 id 选择元素，您可以将标签放置在文档中您喜欢的任何位置，并且不仅如此，您还可以使用多个标签来更改同一输入的状态。如果你愿意，你也可以给他们自己的 id 或 classes，并为他们设置不同的样式。

更重要的是，您可以组合多个输入的状态并添加一个规则，如果您愿意的话，据我所知，目前任何其他纯 HTML + CSS 解决方案都不可用。

对于更复杂的示例，甚至是使用此实现的类似灯箱效果的微型演示，请参见 this fiddle。

于 2012-10-12T01:30:20.897 回答
3

我个人最喜欢的伪选择器是 :target 。

这是我创建的一个纯 CSS 灯箱，它完全依赖于 :target。灯箱被称为LightBoCSS（原因很明显）。主页上有一个演示，还有一个到 github 存储库的链接。请注意，我还没有在其中放置任何非 webkit 转换，因此请使用 webkit 浏览器以获得最佳体验。

的HTML：

    <div class="lightbox">
        <!-- ===== Put the thumbnails in here ===== -->
        <div class="thumbnails">
            <a href="#b1">
                <img src="images/ScreenShot1thumb1.png"/>
            </a>
            <a href="#b2">
                <img src="images/ScreenShot2thumb2.png"/>
            </a>
        </div>
        <!-- ===== Put the big images in here ===== -->
        <div class="lightboximg">
            <a id="b1" href="#">
                <img src="images/ScreenShot1.jpg" alt="EggMaps iPhone Screenshot 1" />
            </a>
            <a id="b2" href="#">
                <img src="images/ScreenShot2.jpg" alt="EggMaps iPhone Screenshot 2" />
            </a>
        </div>
    </div>

使其工作的基本（蒸馏）CSS：

当“a”是目标时，“top”属性会发生变化。

/* Hide each large image */
.lightboximg  > a { /* the container for a large image */
    top: -999em; 
}

/* display the (large image container) anchor elem when it is the target */
.lightboximg > a:target {
    top: 0px;
}

完整的 CSS：

/* Note the :target pseudo-selector. */
/* Hide each large image */
.lightboximg  > a { /* the container for a large image */
    display: block;
    min-height: 100%;
    width: 100%;
    position: absolute;
    /*top: -999em;  for browsers that can't set top in percentages - see comment from xception below */
    top: -101%;
    background-color: #222222; /* dark grey - for browsers that can't do rgba */
    background-color: rgba(0,0,100,0.4); /* for browsers that can't set multiple backgrounds */
    background: url(Fabric-14.png), rgba(0,0,100,0.4);
    opacity: 0;
    transition: top 1s ease-in-out,  opacity 1s ease-in-out, z-index 0.5s ease-in-out;
    -webkit-transition: top 1s ease-in-out,  opacity 1s ease-in-out, z-index 0.5s ease-in-out;
    z-index: -1;
}


/* display the (large image container) anchor elem when it is the target */
.lightboximg > a:target {
    top: 0px;
    opacity: 1;
    transition: top 1s ease-in-out,  opacity 1s ease-in-out, z-index 0.5s ease-in-out;
    -webkit-transition: top 1s ease-in-out,  opacity 1s ease-in-out, z-index 0.5s ease-in-out;
    z-index: 1001;
}

/* style for the large images */
.lightboximg > a img {
    /* centre the image */
    display:block;
    margin: 0px auto;
    /* make it fit into the window */
    max-width: 100%;
}
于 2012-10-13T08:51:44.240 回答
1

最佳答案演示了可以使用 pure 完成的许多很酷的技巧CSS，但是，它没有演示如何使用onclickwithout将数据发布到表单JavaScript。大多数人会告诉你这是不可能的，但事实并非如此。

不使用 , 提交数据的唯一方法JavaSript是使用submit按钮。按钮的submit样式可以类似于文本，但并不理想。只需隐藏提交按钮并labels与相应的for属性一起使用。

请参阅：JS Fiddle 示例

其他事件，例如，onchange确实需要JavaScript，但使用submit立即被 JavaScript 隐藏的按钮允许代码在 JavaScript 被禁用时工作。

大多数开发人员不建议为禁用了客户端脚本的访问者编写代码，因为如今几乎每个人都启用了它。我不同意。虽然。确实几乎每个人都client-side启用了脚本，使网站在禁用脚本的情况下工作有一些优势：

  1. 通过使用 JavaScript 来强制执行良好的编码实践，这就是为了增强网站。（对我来说，JavaScript 主要是通过避免不必要的页面刷新来加速我的网站）
  2. 强制我正确处理客户端使用后退按钮或刷新页面的情况。禁用客户端脚本总是会导致页面刷新，所以我不得不处理这些情况。
  3. 防止 JavaScript 错误破坏网站。
  4. 鼓励良好的安全实践。一些新手错误地依赖 JavaScript 进行验证。验证客户端以保存api calls和方便客户端是可以的，但永远不应该依赖它。服务器端验证是必不可少的，因为客户端的任何东西都可能被伪造。
于 2018-07-14T11:07:39.827 回答