兼容性非常好的简单小巧JavaScript Tab滑动导航菜单效果

浏览：587次- 评论：3次- 发布时间：2019-08-22

Html

Css


        
            
                ASP
                PHP2
                PHP3
                PHP4
            
        
        
            
                阿里西西特效演示：同一页面，滑动门，选同一页面，滑动门，选同一页面，滑动门，选v同一页面，滑动门，选同一页面，滑动门，选同一页面，滑动门，选同一页面，滑动门，选同一页面，滑动门，选同一页面，滑动门，选
            
                 阿里西西特效演示：兼容性好2
            
                 阿里西西特效演示：兼容性好3
            
                 阿里西西特效演示：兼容性好4

*
        {
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 14px;
        }
        .nTab
        {
            width: 500px;
            height: 200px;
            margin: 20px auto;
            border: 1px solid #333;
            overflow: hidden;
        }
        .none
        {
            display: none;
        }
        .nTab .TabTitle li
        {
            float: left;
            cursor: pointer;
            height: 35px;
            line-height: 35px;
            font-weight: bold;
            text-align: center;
            width: 124px;
        }
        .nTab .TabTitle li a
        {
            text-decoration: none;
        }
        .nTab .TabTitle .active
        {
            background: black;
            color: #336699;
        }
        .nTab .TabTitle .normal
        {
            color: #F1AC1C;
        }
        .nTab .TabContent
        {
            clear: both;
            overflow: hidden;
            background: #fff;
            padding: 5px;
            display: block;
            height: 100px;
        }

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3