Question

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

好吧，我手边的问题是如何制作2个独立的div conatiner，左边1个，右边1个水平排列。但是，我知道该怎么做，我想在左边的链接或导航栏中在该div容器中垂直移动。点击链接后，内容将显示在右侧div中，依此类推其他链接。

所以基本上，左侧理想情况下是菜单/导航栏，其中包含垂直链接。单击链接后，内容将显示在右侧div容器中。

最好使用哪种方法以及如何实施/实施...

1。）在CSS中使用Target：psuedo元素？

2.使用Javascript执行此操作。

我也喜欢过渡效果，所以如果有人能指导我朝着正确的方向前进，我会非常感激！另外，如果你有一个jsfiddle，那也是最好的！

我很遗憾没有任何代码提供atm，除了左侧和右侧div容器以及左侧div容器中的links / nav。这是：

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

左侧div容器作为链接/导航，点击链接后，显示右侧div容器中的内容？

1 个答案: