如果这听起来令人困惑,我提前道歉......让我们开始吧!
好的,我手头的问题是如何制作 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>
同样,这只是代码的粗略草稿,但希望它能帮助解决我的问题...
最佳答案
这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;
}
关于javascript - 左 div 容器作为链接/导航,单击链接后,在右 div 容器中显示内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18184833/