1

如果这听起来令人困惑，我提前道歉......让我们开始吧！

好的，我手头的问题是如何制作 2 个单独的 div 容器，1 个在左侧，1 个在右侧水平并排对齐。但是，我知道该怎么做，我想在左侧链接或导航栏在该 div 容器中垂直。单击链接后，内容将显示在右侧的 div 中，以此类推，单击其他链接。

所以基本上，理想的左侧是菜单/导航栏，里面充满了垂直的链接。单击链接后，内容将显示在右侧 div 容器中。

哪种方法最好使用，我将如何做/实施它......

1.) 使用目标：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 回答