使用jQuery制作选项卡功能

先来图片展示

一，

二，

三，

从图片中可以看到，点击上边的产品属性等内容，该选项卡颜色会变深，下面会出现对应内容。

点击产品尺码表会隐藏掉产品属性的内容。这是怎么做的呢？下面来看jQuery的代码

<SCRIPT> 
//选项卡变换
            $（document）.ready（function（）{ 
                var $ Div_li = $（“div.tab_menu ul li”）
                $ Div_li.click（function（）{ 
                    //添加兄弟元素和隐藏兄弟元素
                    $（本）.addClass（“选择”）的兄弟姐妹（）removeClass（“选择”）.. 
                    //获取当前锂元素里面的索引
                    var index = $ Div_li.index（this）; 
                    //获取子节点在div里面
                    $（“div.tab_box> div”）。
                                    EQ（指数）.show（）//相对应选项卡的元素显示
                                    .siblings（）隐藏（）; //其余隐藏
                }）。hover（function（）{ 
                    $（本）.addClass（“悬停”）;
                }，function（）{ 
                    $（本）.removeClass（“悬停”）; 
                }）
            }）
</ SCRIPT>

通过上面的功能代码，我们已经实现了选项卡功能。

下面是身体内的代码

<div class =“tab”>
                    <div class =“tab_menu”>
                        <UL>
                            <li class =“selected”>产品属性</ li>
                            <LI>产品尺码表</ LI>
                            <LI>产品介绍</ LI>
                        </ UL>
                    </ DIV>
                    <div class =“tab_box”>
                        <DIV>
                            沿用风靡百年的经典全棉牛津纺面料，通过领先的液氨整理技术，使面料的抗皱性能更上一层。延续简约，舒适，健康设计理念，特推出免烫，易打理的精细免烫牛津纺长袖衬衫系列。
                        </ DIV>
                        <div class =“hide”>
                            来自新疆无污染的生态棉花，采用紧密纺精梳棉纱，单经双纬的织造组织，造就了颗粒饱满，朴实无华，温润细腻的经典牛津纺，易洗快干，手感丰软，吸湿性好。设计师遵循布料完美肌理，立体剪裁，以直筒明门襟的经典造型，配合圆袋，曲摆的现代人性化裁减，相得益彰，浑然天成。色彩明快的纯色衬衫简洁，自然，为您营造出利落，爽朗的形象，透出热情，优雅的个性;精选白，蓝，淡粉，宽条纹，英国格等10余种明亮，经典花型，色彩缤纷呈现，以适合本季着装，更显自然，舒适境界。
                        </ DIV>
                        <div class =“hide”>
                            世界权威德国科德宝的衬和英国高士缝纫线使成衣领型自然舒展，永不变形，缝线部位平服工整，牢固耐磨;人性化的4片式后背打褶结构设计提供更舒适的活动空间;领尖扣的领型设计戴或不戴领带风格炯同，瞬间呈现;醇正天然设计，只为彰显自然荣耀。
                        </ DIV>
                    </ DIV>
                </ DIV>

功能已完成，仅供参考。