效果图：

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=设备宽度，初始比例=1.0,最小比例=1.0,最大比例=1.0,用户可缩放=否标题移动端标签选项卡/title脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script script $(function(){ $().制表符a ').单击(function() { $(this)).addClass('curr ').兄弟姐妹()。移除CLaSS(' curr ')；定义变量索引=$(这个).index()；数字=索引；$('.导航。内容李' .hide()；$('.导航content li:eq(' index ').show()；});})/脚本样式* { margin : 0；padd : 0；} div，input，textarea，button，a {-web kit-tap-highlight-color : rgba(0，0，0，0)；} ul、li、ol { list-style : no；} a { color : # 323232 outline-style :无；文本装饰：无；} .border-b {位置：相对；} .{ top : auto }之后的border-b :底部： 0；} .边界-t :之前.{内容： }后的边界-b :绝对位置：左： 0；背景# DDD right : 0；height: 1px-web套件-transform : Scaley(0.5)；变换： Scaley(0.5)；-web工具包-transform-origin : 0 0；变换原点： 0 0；} .nav {背景-color : # fff；文本对齐：中心；} .导航tab {宽度： 100%；相对位置：飞越：隐藏；} .制表符a {左浮动：宽度： 49%;高度： 2.56雷姆；线高：2.56雷姆；显示器：内联块；右边框： 1px实心# e1e1e1}。tab a :最后一个子级{边框-右侧： 0；} .选项卡curr {边框-底部： 2px实心# fc 7831color: # fc7831}。内容ul li {显示：无；划水： 3%;宽度： 94%;}/style/head dydiv class=' nav ' div class=' tab border-b ' a href=' JavaScript :rel='外部nofollow' rel='外部nofollow' class='curr '商品介绍/a a href=' JAVAScript :rel='外部nofollow' rel='外部' nofollow '评价(99)/a/div class=' content ' ul Li style=' display : block '商品介绍/li li评价/li /ul /div/div/body/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！