如何用html5实现左侧是滚动菜单，选中后右边呈现效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用html5实现左侧是滚动菜单，选中后右边呈现效果相关的知识，希望对你有一定的参考价值。
参考技术A这问题好纠结，最少来个截图啊，给你写个吧，粘过去就行，不行的话留个q，继续问
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>选项卡</title>
<style type="text/css">
::-webkit-scrollbarwidth:0px
* margin:0; padding:0
ul
list-style: none;
.tab
width: 600px;
margin: 80px auto;
.tab .tab_menu
float:left;
height: 138px;
width: 90px;
overflow-y:scroll;
.tab .tab_menu ulwidth:60px;
.tab .tab_menu ul li
width: 60px;
text-align: center;
line-height: 30px;
.tab .tab_menu ul li:last-child
border-right:none;
width:60px;
.tab .tab_menu ul li.on
background: #999;
.tab_boxfloat:left;
.tab .tab_box > div
width: 300px;
height: 138px;
border:1px solid #6cf;
display: none; //将三个内容框架全隐藏，通过下面的:first-child属性只将第一个框架内容显示出来
.tab .tab_box > div:first-child
display: block;
</style>
</head>
<body>
<!--整体构局说明，用ul完成按钮的横向布局，用div完成三个内容框架的垂直布局（类似于类表），然后将三个内容框架全隐藏，通过下面的:first-child属性只将第一个框架内容显示出来-->
<div class="tab">
<div class="tab_menu">
<ul>
<li class="on">实事</li>
<li>政治</li>
<li>体育</li>
<li>实事</li>
<li>政治</li>
<li>体育</li>
<li>实事</li>
<li>政治</li>
<li>体育</li>
<li>实事</li>
<li>政治</li>
<li>体育</li>
</ul>
</div>
<div class="tab_box">
<div>实事内容</div>
<div>政治内容</div>
<div>体育内容</div>
<div>实事内容</div>
<div>政治内容</div>
<div>体育内容</div>
<div>实事内容</div>
<div>政治内容</div>
<div>体育内容</div>
<div>实事内容</div>
<div>政治内容</div>
<div>体育内容</div>
</div>
</div>
<script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
$(".tab_menu ul li").click(function()
$(this).addClass("on").siblings().removeClass("on"); //切换选中的按钮高亮状态
var index=$(this).index(); //获取被按下按钮的索引值，需要注意index是从0开始的
$(".tab_box > div").eq(index).show().siblings().hide(); //在按钮选中时在下面显示相应的内容，同时隐藏不需要的框架内容
);
);
</script>
</body>
</html>本回答被提问者采纳
以上是关于如何用html5实现左侧是滚动菜单，选中后右边呈现效果的主要内容，如果未能解决你的问题，请参考以下文章