效果如下：
html部分
<div id="ad"> ???????<ul id="tab_left"> ???????????<li><a href="#">选项卡1</a></li> ???????????<li><a href="#">选项卡2</a></li> ???????????<li><a href="#">选项卡3</a></li> ???????????<li><a href="#">选项卡4</a></li> ???????</ul> ???????<ul id="tab_con"> ???????????<li><img src="2018a.png" alt=""></li> ???????????<li><img src="2018b.png" alt=""></li> ???????????<li><img src="2018c.png" alt=""></li> ???????????<li><img src="2018d.png" alt=""></li> ???????</ul> ???</div>
只要分为两部分
一部分在左边，是放选项卡的
另一部分在右边，是显示图片的
css部分
???????* { ???????????margin: 0; ???????????padding: 0; ???????} ???????#tab_left { ???????????width: 180px; ???????????height: 380px; ???????????z-index: 20; ???????????float: left; ???????} ???????#tab_left li { ???????????list-style-type: none; ???????????font-size: 20px; ???????????text-align: center; ???????????border-bottom: 1px solid #ccc; ???????????border-right: 1px solid #ccc; ???????} ???????#tab_left li a { ???????????color: #000; ???????????text-decoration: none; ???????????line-height: 60px; ???????????height: 60px; ???????????display: block; ???????????border-left: 1px solid #ccc; ???????????background: #fff; ???????} ???????#tab_left li a:hover { ???????????text-decoration: none; ???????????background: #f30; ???????????color: #fff; ???????????line-height: 60px; ???????} ???????#tab_con { ???????????width: 780px; ???????????height: 440px; ???????????overflow: hidden; ???????????float: left; ???????????z-index: 10; ???????} ???????#tab_con li { ???????????float: left; ???????????width: 100%; ???????} ???????#tab_con li img { ???????????width: 780px; ???????????height: 440px; ???????????/*border: 1px solid #ccc;*/ ???????} ???????#ad { ???????????width: 960px; ???????????margin: 0 auto; ???????????margin-top: 40px; ???????????border: 1px solid #999; ???????????overflow: hidden; ???????}左边选项卡正当排列
右边的图片还是通过overflow: hidden;和宽高将图片显示一个图片的高度。或者用display：none；将图片先隐藏。
然后通过jq进行显示或隐藏
js部分
<script> ???????$(function(){ ???????????var tab1 = $("#tab_left").find("li"); ???????????var con1 = $("#tab_con").find("li"); ???????????tab1.hover(function(){ ???????????????var index = tab1.index(this); ???????????????con1.not(index).hide(); ???????????????con1.eq(index).fadeIn(1000); ???????????}); ???????}); ???</script>先找到选项卡的列表，并定义tab1；
再找到图片的列表，并定义con1；
然后再对选项卡下的每一个li设置悬浮事件函数
里面的函数，先将选项卡的每个li添加编号
然后跟图片列表进行配对，并显示相同编号的图片，隐藏其他的图片。
知识点：
| 函数名 | 功能 | 使用格式 | 描述 |
| index() | 返回指定元素相对于其他指定元素的index位置 | $(select).index() | 相对于选择器。如上述的第一个li，则表示:tab1.index(0); |
| eq() | 选择器选取带有指定index值的元素 | $(select).eq(index) | index值从零开始，所以直接用数字也行，但这样却可以通过index的值改变而改变，达成所以li都有被选中的机会。 |
| not() | 选择器选取除了指定元素以外的所有元素。 | $(select).not(index) | 如果与eq()的值相同，那么除eq()所选择的那个li不要，其他的都要了。 |
| hide() | 隐藏HTML元素 | $(select).hide(speed,callback) | speed是时间，用于产生过度的，callback是作用函数，用于触发后的其他执行 |
| show() | 显示HTML元素 | $(select).show(speed,callback) | 同上 |
| fadeIn() | 用于淡入以隐藏的元素 | $(select).fadeIn(speed,callback) | 里面的参数同上， |
纵向选项卡jquery
原文地址：https://www.cnblogs.com/yinwangyizhi/p/9443885.html