Question

我是网页设计的新手，特别是css3和html5等技术，我想构建一个尽可能使用CSS3和HTML5以及尽可能少使用JavaScript的网站。

所以我想只使用CSS / HTML获得相同的行为。

$(document).ready(function () {
    $("#wrapper section").click(function() {
        var bcn = $(this).next('.box-content');
        if ($('.box-content').is(':visible')) {
            $('.box-content').hide();
            bcn.show();
        }
        else {
            $('.box-content').hide();
            bcn.slideToggle(200);
        }
    });
});

这就是我想要在没有JS的情况下做出的：http://jsfiddle.net/8BLD7/7/

Answer 1

并非所有浏览器都支持CSS3和HTML5的所有功能。您可能会产生一个网站，其中功能分散在支持它们的浏览器周围。

您可能想尝试以下策略：

progressive enhancement

构建了当前浏览器的基础知识，并为支持它的浏览器添加了新功能。这样你就不会得到一个在所有浏览器中都具有部分功能的网站。

祝你好运，编码愉快！

Answer 2

这大致接近你所拥有的代码，显然正如其他人所说，这只适用于现代浏览器 - 我不建议纯粹使用这个系统 - 但它可以作为一个工作War10ck提到的渐进增强。

http://jsfiddle.net/3VQ9X/

有关其工作原理的更多信息，以及需要注意的问题，请阅读以下链接：

这里有标记和css。

<强>标记

<div id="wrapper">
  <nav>
    <h3><a href="#content-1">App 1</a><h3>
    <h3><a href="#content-2">App 2</a><h3>
  </nav>
  <section class="main">
    <section class="box-content" id="content-1">
      <p> This is content 1 </p>
    </section>
    <section class="box-content" id="content-2">
      <p> This is content 2 </p>
    </section>
  </section>
</div>

css（基本元素设置，可以随意修改）

nav {
  border: 1px solid black;
  float: left;
}

section.main {
  position: relative; /* this is important */
  overflow: hidden; /* as is this, but everthing else can be modified */
  float: left;
  border: 1px solid red;
  width: 500px; /* having fixed dimensions will make things easier */
  height: 500px;
}

css（魔术位）

section.box-content {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: all 1.0s ease-in-out;
  -moz-transition: all 1.0s ease-in-out;
  -ms-transition: all 1.0s ease-in-out;
  -o-transition: all 1.0s ease-in-out;
  transition: all 1.0s ease-in-out;
  -webkit-transform: translate(0,-500px);
  -moz-transform: translate(0,-500px);
  -ms-transform: translate(0,-500px);
  -o-transform: translate(0,-500px);
  transform: translate(0,-500px);
}

/* the pseudo selector :target only comes into effect when
   an anchored link has been clicked that targets a specific
   element by id. If the element with the id has this pseudo
   selector applied, then the css will be applied. Tie this
   together with transformations, and you have interactive 
   dynamic css :) */

section.box-content:target {
  -webkit-transform: translate(0,0);
  -moz-transform: translate(0,0);
  -ms-transform: translate(0,0);
  -o-transform: translate(0,0);
  transform: translate(0,0);
}

Answer 3

War10ck是正确的。但是，如果您希望以任何方式使用CSS3和HTML5，则可以查看CSS3 :target Selector。当URL中的哈希值和元素的id相同时，CSS中的:target伪选择器匹配。

您可以在http://css-tricks.com/on-target找到有关它的更多信息。

以下是http://jsfiddle.net/_omi/yDWzA/6/

的示例

有没有办法在没有jQuery的情况下做同样的事情，只使用CSS3和HTML5

3 个答案: