HTML: <div class="tabs-vertical"> <ul> <li> <a class="tab-active" data-index="0" href="#">选项一</a> </li> <li> <a data-index="1" href="#">选项二</a> </li> <li> <a data-index="2" href="#">选项二</a> </li> </ul> <div class="tabs-content-placeholder"> <div class="tab-content-active"> <p class="active fl">价格趋势</p> <select class="selectList fl"> <option>1月</option> <option>2月</option> <option>3月</option> <option>4月</option> <option>5月</option> <option>6月</option> <option>7月</option> <option>8月</option> <option>9月</option> <option>10月</option> <option>11月</option> <option>12月</option> </select> <select class="selectList fl"> <option>2019年</option> <option>2020年</option> <option>2021年</option> <option>2022年</option> </select> <span class="block clear"></span> <div id="chart" style="height: 500px"></div> </div> <div></div> <div></div> </div> </div>
css:
.tabs-vertical{ font: bold 13px sans-serif; border-radius: 2px; margin-top: 15px; } /* The tabs */ .tabs-vertical ul{ float: left; list-style: none; text-align: left; width: 15%; margin: 0; padding-left: 0; } .tabs-vertical ul li{ margin-right: -1px; } .tabs-vertical ul li a{ display: block; text-decoration: none; color: #656a6d; border: 1px solid transparent; border-right: 0; border-left: 0; padding: 10px 40px 10px 20px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .tabs-vertical ul li a.tab-active { background-color: #ffffff; box-shadow: -8px 0px 10px #ddd; } .tabs-vertical ul li:first-child a{ border-top: 0; } /* The content */ .tabs-vertical .tabs-content-placeholder{ overflow: hidden; font-weight: normal; background-color: #fff; padding: 20px 40px 45px; margin: 0 auto; box-shadow: 0px 0px 10px #ddd; border-radius: 10px; } .tabs-vertical .tabs-content-placeholder div{ display: none; position: relative; } .tabs-vertical .tabs-content-placeholder div.tab-content-active{ display: block; } .tabs-vertical .tabs-content-placeholder div p{ color: #565a5c; line-height: 1.5; text-align: left; margin: 5px 0 20px; } .tabs-vertical .tabs-content-placeholder div img{ max-width: 100%; } .tab-content-active div{ display: block!important; } .selectList{ border-radius: 25px; cursor: pointer; width: 80px!important; display: inline-block; text-align: center!important; padding: 5px; margin-top: 0!important; }
JS:
var widget = $('.tabs-vertical'); var tabs = widget.find('ul a'), content = widget.find('.tabs-content-placeholder > div'); tabs.on('click', function (e) { e.preventDefault(); // Get the data-index attribute, and show the matching content div var index = $(this).data('index'); tabs.removeClass('tab-active'); content.removeClass('tab-content-active'); $(this).addClass('tab-active'); content.eq(index).addClass('tab-content-active'); });
效果:
因为使用场景是切换选项卡重新获取数据,选项卡数量和旁边数据也无法确定,所以做了少许改动,当前场景为点击选项卡右边的数据会重新获取加载。