左div容器作为链接/导航，在单击链接时会在右div容器中显示内容吗？

Question

如果这听起来令人困惑，我提前表示歉意……让我们开始吧！

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

因此，基本上，左侧最好是菜单/导航栏，其中包含垂直链接。 单击链接后，内容将显示在右侧的div容器中。

哪种方法最适合使用，我将如何执行/实现...

1.）在CSS中使用Target：伪元素？

2.）使用Javascript执行此操作。

我也希望过渡效果，所以如果有人可以帮助我朝正确的方向发展，我将不胜感激！ 另外，如果您有jsfiddle，那也是最好的！

不幸的是，除了左和右div容器以及左div容器中的links / nav之外，我没有任何代码可提供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>

再次，这只是代码的粗略草稿，但希望它对我要问的内容有所帮助...

Answer 1

该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;
}