使用html css js 书写tab切换

html

<div class="i-recommend-main"><ul class="i-re-menu"><li class="on" data="i-icon-r01"><span>内容</span></li><li data="i-icon-r02"><span>条件</span></li><li data="i-icon-r03"><span>时机</span></li><li data="i-icon-r04"><span>预警</span></li></ul><!-- 1 --><div class="i-recommend-box" data="i-icon-r01" style="display: block">你好1</div><!-- 2 --><div class="i-recommend-box" data="i-icon-r02">你好2</div><!-- 3 --><div class="i-recommend-box" data="i-icon-r03">你好3</div><!-- 4--><div class="i-recommend-box" data="i-icon-r04">你好4</div></div>

css

.i-recommend-main {padding: 30px;background-color: #fff;border-radius: 10px;margin-top: 30px;}.i-recommend-box{display: none;}.i-re-menu {overflow: hidden;}.i-re-menu li {width: 195px;height: 40px;line-height: 40px;text-align: center;color: #666;margin-right: 1%;float: left;background-color: #f5f9fa;border-radius: 10px;border: 1px solid #f5f9fa;}.i-re-menu li span {padding-left: 30px;}.i-re-menu li.on {color: #96d0ff;border: 1px solid #96d0ff;}

js

                var showBox = $(".i-recommend-box");                var menuLi = $('.i-re-menu li');                menuLi.on("click",function(){                $(this).addClass('on').siblings('li').removeClass('on'); var liData = $(this).attr("data");for (var i = 0; i < showBox.length; i++) {                       var showBoxData = $(showBox[i]).attr("data");                       if (liData == showBoxData) {                         $(showBox[i]).show().siblings(".i-recommend-box").hide();                       }}                })