<div class="tab"><div class="tab_list"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价（50000）</li><li>手机社区</li></ul></div><div class="tab_con"><div class="item" style="display: block;">商品介绍模块内容</div><div class="item">规格与包装模块内容</div><div class="item">售后保障模块内容</div><div class="item">商品评价（50000）模块内容</div><div class="item">手机社区模块内容</div></div></div>

 <style>* {margin: 0;padding: 0;}li {list-style-type: none;}.tab {width: 978px;margin: 100px auto;}.tab_list {height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;}.tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;}.tab_list .current {background-color: #c81623;color: #fff;}.item_info {padding: 20px 0 0 20px;}.item {display: none;}</style>

    <script>// 点击修改内容以及样式// 点击li添加类名current，其他li不准加这个类名// 并且对应的div要显示，其他的div要隐藏$('.tab_list li').click(function () {// 1、点击哪个li给哪个li添加类名，其他的移除类名$(this).addClass('current').siblings().removeClass('current');// 2、显示对应的div，其他div隐藏// 获取索引值var index = $(this).index();// 根据index查找对应div$('.tab_con div').eq(index).show().siblings().hide();});</script>

注意jQuery等案例，需要引入jquery编辑文件

   <script src="jquery.min.js"></script>

实现效果：