没有jQuery，仅使用CSS3和HTML5，有什么方法可以做同样的事情

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所有功能。 您冒着产生一个站点的风险，该站点的功能分散在支持它们的浏览器中。

您可能要尝试以下策略：

渐进增强

它构建了当前浏览器的基础，并为支持它的浏览器添加了新功能。 这样一来，您最终不会拥有一个在所有浏览器中都具有部分功能的网站。

祝您好运，编码愉快！

Answer 2

这大致类似于您那里的代码，显然，正如其他人所说的那样，这仅适用于现代浏览器-我不建议仅使用此系统-但这可以作为渐进增强功能来使用，如War10ck。

http://jsfiddle.net/3VQ9X/

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

• http://css-tricks.com/on-target/
• http://reference.sitepoint.com/css/pseudoclass-target
• http://blog.teamtreehouse.com/stay-on-target

这是涉及的标记和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/