-1

私は Web デザインの初心者で、特に css3 や html5 などのテクノロジーについては初心者です。可能な限り CSS3 と HTML5 を使用し、JavaScript をできるだけ使用しない Web サイトを構築したいと考えています。

したがって、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

War10ckは正しいです。ただし、いずれかの方法でCSS3とHTML5を使用したい場合は、をチェックアウトできますCSS3 :target Selector。:targetURLのハッシュと要素のIDが同じ場合、CSSの疑似セレクターは一致します。

詳細については、http：//css-tricks.com/on-targetを参照してください。

これが例ですhttp://jsfiddle.net/_omi/yDWzA/6/

于 2013-01-16T18:26:11.493 に答える
1

これは、おおよそのコードに近いものです。他の人がこれは最新のブラウザでのみ機能すると述べているように、このシステムを純粋に使用することはお勧めしませんが、次のようにプログレッシブエンハンスメントとして機能することができます。 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);
}
于 2013-01-16T18:13:35.410 に答える