一、实现效果
二、实现源码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>H5垂直选项卡：左边显示菜单-右边显示内容-白龙网</title>
</head>
<body>
<div class="tab">
<div class="box">
<ul class="menus">
<li class="bg">seo学习教程</li>
<li>seo优化服务</li>
<li>seo技术培训</li>
<li>优化seo教程</li>
<li>seo优化教程网</li>
<li>淘宝seo优化教程</li>
<li>seo优化教程书</li>
</ul>
<div class="right">
<div class="scroll">
<div class="tab_right">
<img src="a1.png" alt="" class="img-height">
</div>
<div class="tab_right">
<img src="a2.png" alt="">
</div>
<div class="tab_right">
<img src="a3.png" alt="">
</div>
<div class="tab_right">
<img src="a4.png" alt="">
</div>
<div class="tab_right">
<img src="a5.png" alt="">
</div>
<div class="tab_right">
<img src="a6.png" alt="">
</div>
<div class="tab_right">
<img src="a7.png" alt="">
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<script src="jquery.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>