<ul> <li>选择填充单独的<div>

Question

我正在尝试根据一个<div>的菜单选项填充单独的<div>元素。在从垂直菜单中选择<li><a>之前，将隐藏要显示的内容。

我已经阅读了如何使用jQuery执行此操作，但它似乎并没有起作用。

我不是在寻找＆＃34;剪切/粘贴＆＃34;回答，只是朝着正确的方向发展。

Fiddle

Answer 1

如果您想在点击左侧面板上显示右侧div中的内容，可以这样做。

＆＃13;

＆＃13;

$(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');
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;