javascript - 左 div 容器作为链接/导航，单击链接后，在右 div 容器中显示内容？

Question

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

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

所以基本上，左侧最好是充满垂直链接的菜单/导航栏。单击链接后，内容会显示在右侧的 div 容器中。

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

1.) 在 css 中使用 Target: 伪元素？

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>

同样，这只是代码的粗略草稿，但希望它能帮助解决我的问题...

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