。
我正在尝试根据一个<div>的菜单选择填充一个单独的<div>元素。 要显示的内容将被隐藏，直到从垂直菜单中选择<li><a>。
我已经阅读了如何使用jQuery执行此操作，但它似乎不起作用。
我不是在寻找"剪切/粘贴"答案，只是在正确方向上寻找一个点。
小提琴
如果您想在
单击时根据左侧面板在右侧div 中显示内容，您可以这样做。
$(document).ready(function() {
$('.left ul li a').click(function(e) {
e.preventDefault();
$($(this).attr('href')).show().siblings().hide();
$(this).parent('li').addClass('active').siblings().removeClass('active');
});
});.left {
padding: 0;
left: 10%;
width: 33.3%;
position: absolute;
height: 500px;
color: white;
border: thin solid #000;
}
#right {
padding: 0;
right: 10%;
width: 33.3%;
position: absolute;
height: 500px;
color: white;
border: thin solid #000;
}
.vertical {
margin: 0;
padding: 0;
width:100%;
list-style:none;
opacity:1;
z-index:1;
}
ul.vertical {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: #f1f1f1;
border: .5px solid #555;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
li.vertical {
text-align: center;
border-bottom: 1px solid #555;
}
li.vertical:last-child {
border-bottom: none;
}
li.vertical a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
li.vertical a:hover {
background-color: #333;
color: white;
}
li.vertical.active a {
background: red;
}
.tab {
display:none;
}
.tab.active {
display:block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="left" style="top:25%; background-color: #333; opacity:.6;">
<ul class="vertical">
<li class="vertical active"><a href="#tab1">Link 1</a></li>
<li class="vertical"><a href="#tab2">Link 2</a></li>
<li class="vertical"><a href="#tab3">Link 3</a></li>
</ul>
</div>
<div id="right" style="top:25%; background-color: #333; opacity:.6;">
<div id="tab1" class="tab active">
<p>Content 1</p>
</div>
<div id="tab2" class="tab">
<p>Content 2</p>
</div>
<div id="tab3" class="tab">
<p>Content 3</p>
</div>
</div>