1

これが混乱を招くように聞こえる場合は、事前にお詫び申し上げます...始めましょう!

さて、手元にある私の質問は、左側に 1 つ、右側に 1 つを水平に並べて 2 つの個別の div conatiners を作成する方法です。方法はわかっていますが、左側のリンクまたはナビゲーション バーをその div コンテナーに垂直に配置したいと考えています。リンクをクリックすると、コンテンツが右側の div に表示され、クリックすると他のリンクが表示されます。

したがって、基本的には、左側が縦方向のリンクでいっぱいのメニュー/ナビゲーション バーであることが理想的です。リンクをクリックすると、コンテンツが右側の div コンテナーに表示されます。

どの方法を使用するのが最適で、どのように実行/実装しますか...

1.) Target: css の疑似要素を使用しますか?

2.) Javascript を使用してこれを実行します。

トランジション効果も欲しいので、誰かが私を正しい方向に導くのを手伝ってくれたら、とても感謝しています! また、jsfiddle がある場合は、それも最適です。

残念ながら、左右の div コンテナーと左の div コンテナー内のリンク/ナビゲーションを除いて、atm を提供するコードはありません。これがそれです：

CSS:

#wrapper {
  width: 1000px;
  height: 420px;
  padding: 0;
  margin: 0 auto;
}
#left_div {
  width: 200px;
  height: 400px;
  padding: 0;
  margin: 10px 0;
  background: #333;
  float: left;
}
#left_div a {
  width: 200px;
  height: 30px;
  padding: 0; /*-- Have, but atm cannot remember --*/
  margin: 0; /*-- Have, but atm cannot remember --*/
  color: #CCC;
  font: 20px Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-variant: small-caps;
  text-align: center;
}
#left_div a:hover, a.active {
  background: rgba(204, 204, 204, 0.09);
  color: #FFF;
}
#right_div {
  width: 800px;
  height: 400px;
  padding: 0;
  margin: 10px 0;
  background: #333;
  float: left;
}
#right_div .container {
  width: 600px;
  height: 380px;
  padding: 0;
  margin: 10px 10px;
  background: #222;
  float: left;
}

HTML:

<div id="wrapper">
    <div id="left_div">
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </div>
    <div id="right_div">
        <div class="container">
        </div>
    </div>
</div>

繰り返しますが、これはコードの大まかなドラフトですが、私が求めていることに役立つことを願っています...

4

1 に答える 1

0

このJSFiddleが役に立つかもしれません。

また

コード:

HTML :

<div id="wrapper">
    <div id="left_div">
        <a href="#" id="link1">Link1</a>
        <a href="#" id="link2">Link2</a>
        <a href="#" id="link3">Link3</a>
        <a href="#" id="link4">Link4</a>
    </div>
    <div id="right_div">
        <div class="container">
        </div>
    </div>
</div>

Javascript (Jquery)

$(document).ready(function(){
    $("#link1").click(function(){

        animateDiv("right_div .container");
        $("#right_div .container").html("You have Click on line1");

    });
    $("#link2").click(function(){
    animateDiv("right_div .container");
        $("#right_div .container").html("You have Click on line2");

    });
    $("#link3").click(function(){
    animateDiv("right_div .container");
        $("#right_div .container").html("You have Click on line3");

    });
    $("#link4").click(function(){
    animateDiv("right_div .container");
        $("#right_div .container").html("You have Click on line4");

    });

    function animateDiv(id){
         //perform your animation here
    }
});

CSS :

#wrapper {
  width: 1000px;
  height: 420px;
  padding: 0;
  margin: 0 auto;
}
#left_div {
  width: 200px;
  height: 400px;
  padding: 0;
  margin: 10px 0;
  background: #333;
  float: left;
}
#left_div a {
  width: 200px;
  height: 30px;
  padding: 0; /*-- Have, but atm cannot remember --*/
  margin: 0; /*-- Have, but atm cannot remember --*/
  color: #CCC;
  font: 20px Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-variant: small-caps;
  text-align: center;
}
#left_div a:hover, a.active {
  background: rgba(204, 204, 204, 0.09);
  color: #FFF;
}
#right_div {
  width: 800px;
  height: 400px;
  padding: 0;
  margin: 10px 0;
  background: #333;
  float: left;
}
#right_div .container {
  width: 600px;
  height: 380px;
  padding: 0;
  margin: 10px 10px;
  background: #222;
  float: left;
    color:white;
}
于 2013-08-12T10:48:42.497 に答える