-1

我对网页设计非常陌生，尤其是像 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/

4

3 回答 3

2

并非所有浏览器都支持CSS3和的所有功能HTML5。您冒着创建一个功能分散在支持它们的浏览器周围的网站的风险。

您可能想尝试以下策略：

渐进增强

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

祝你好运，编码愉快！

于 2013-01-16T18:04:44.327 回答
1

这大致近似于您那里的代码，显然正如其他人所说，这仅适用于现代浏览器 - 我不建议纯粹使用这个系统 - 但它可以作为渐进增强工作，如战争10ck。

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);
}
于 2013-01-16T18:13:35.410 回答
1

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

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

这是一个示例http://jsfiddle.net/_omi/yDWzA/6/

于 2013-01-16T18:26:11.493 回答