jQuery实现Tab栏切换

HTML

<div class=\"box\"><!-- 清除浮动 --><ul class=\"clearfix\"><li class=\"active\">手机</li><li>美食</li><li>电脑</li><li style=\"border-right: 1px solid red;\">衣服</li></ul><div><div class=\"content\" style=\"display: block;\">手机</div><div class=\"content\">美食</div><div class=\"content\">电脑</div><div class=\"content\">衣服</div></div></div>

CSS

*{margin: 0;padding: 0;}ul {list-style: none;}.box{width: 398px;margin: 100px auto;}li{float: left;width: 98px;height: 42px;border: 1px solid red;border-right: 0;text-align: center;line-height: 42px;cursor: pointer;}.content{width: 395px;height: 140px;border: 1px solid red;border-top: 0;display: none;}.active{background: #FF4400;color: #fff;}.clearfix::after{content: \'\';display: block;height: 0;clear: both;}

JS

$(function(){$(\'ul\').children(\'li\').click(function(){$(this).addClass(\'active\').siblings().removeClass(\'active\')var index = $(this).index()$(\'div.content\').eq(index).show().siblings().hide()})})