jquery招聘网站tab选项卡切换布局



62 247 83



特效描述:jquery 招聘网站 tab选项卡 切换布局,jquery招聘网站tab选项卡切换布局

代码结构

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css"/>

2. 引入JS

<script src="js/jquery.js"></script>
<script src="js/jquery.SuperSlide.2.1.1.js"></script>

3. HTML代码

        <div class="set-content">
            <div style="height: 40px;"></div>
            <div class="set-title hd">
                <ul class="clearfix">
                    <li class="on">IT互联网</li>
                    <li>金融</li>
                    <li>房地产</li>
                    <li>汽车</li>
                    <li>医疗健康</li>
                    <li>消费品</li>
                </ul>
            </div>
            <div class="set-middle bd">
                <ul class="set-middle-item">
                    <li>
                        <div class="set-middle-image">
                            <img src="images/item001.png" alt="">
                            <img src="images/item002.png" alt="">
                            <img src="images/item003.png" alt="">
                            <img src="images/item004.png" alt="">
                            <img src="images/item005.png" alt="">
                            <img src="images/item006.png" alt="">
                            <img src="images/item007.png" alt="">
                            <img src="images/item008.png" alt="">
                        </div>
                        <div class="set-middle-list">
                            <ul>
                                <li>
                                    <div class="set-ali">阿里巴巴</div>
                                    <div class="set-java">Java技术专家</div>
                                    <div class="set-salary">20K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li>
                                    <div class="set-ali">华为</div>
                                    <div class="set-java"> 架构师</div>
                                    <div class="set-salary">25K - 50K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li>
                                    <div class="set-ali">京东商城</div>
                                    <div class="set-java">web前端工程师</div>
                                    <div class="set-salary">20K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li>
                                    <div class="set-ali">小米</div>
                                    <div class="set-java">Java技术专家</div>
                                    <div class="set-salary">30K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li style="border-bottom:none">
                                    <div class="set-ali">网易</div>
                                    <div class="set-java">自身IOS开发</div>
                                    <div class="set-salary">10K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
                <ul class="set-middle-item">
                    <li>
                        <div class="set-middle-image">
                            <img src="images/item009.png" alt="">
                            <img src="images/item010.png" alt="">
                            <img src="images/item011.png" alt="">
                            <img src="images/item012.png" alt="">
                            <img src="images/item013.png" alt="">
                            <img src="images/item014.png" alt="">
                            <img src="images/item015.png" alt="">
                            <img src="images/item016.png" alt="">
                        </div>
                        <div class="set-middle-list">
                            <ul>
                                <li>
                                    <div class="set-ali">优信</div>
                                    <div class="set-java">Java技术专家</div>
                                    <div class="set-salary">20K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li>
                                    <div class="set-ali">新网银行</div>
                                    <div class="set-java"> 架构师</div>
                                    <div class="set-salary">25K - 50K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li>
                                    <div class="set-ali">宜信</div>
                                    <div class="set-java">web前端工程师</div>
                                    <div class="set-salary">20K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li>
                                    <div class="set-ali">京东金融</div>
                                    <div class="set-java">Java技术专家</div>
                                    <div class="set-salary">30K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li style="border-bottom:none">
                                    <div class="set-ali">爱花钱</div>
                                    <div class="set-java">自身IOS开发</div>
                                    <div class="set-salary">10K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
                <ul class="set-middle-item">
                    <li>
                        <div class="set-middle-image">
                            <img src="images/item001.png" alt="">
                            <img src="images/item002.png" alt="">
                            <img src="images/item003.png" alt="">
                            <img src="images/item004.png" alt="">
                            <img src="images/item005.png" alt="">
                            <img src="images/item006.png" alt="">
                            <img src="images/item007.png" alt="">
                            <img src="images/item008.png" alt="">
                        </div>
                        <div class="set-middle-list">
                            <ul>
                                <li>
                                    <div class="set-ali">阿里巴巴</div>
                                    <div class="set-java">Java技术专家</div>
                                    <div class="set-salary">20K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li>
                                    <div class="set-ali">华为</div>
                                    <div class="set-java"> 架构师</div>
                                    <div class="set-salary">25K - 50K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li>
                                    <div class="set-ali">京东商城</div>
                                    <div class="set-java">web前端工程师</div>
                                    <div class="set-salary">20K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li>
                                    <div class="set-ali">小米</div>
                                    <div class="set-java">Java技术专家</div>
                                    <div class="set-salary">30K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li style="border-bottom:none">
                                    <div class="set-ali">网易</div>
                                    <div class="set-java">自身IOS开发</div>
                                    <div class="set-salary">10K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
                <ul class="set-middle-item">
                    <li>
                        <div class="set-middle-image">
                            <img src="images/item001.png" alt="">
                            <img src="images/item002.png" alt="">
                            <img src="images/item003.png" alt="">
                            <img src="images/item004.png" alt="">
                            <img src="images/item005.png" alt="">
                            <img src="images/item006.png" alt="">
                            <img src="images/item007.png" alt="">
                            <img src="images/item008.png" alt="">
                        </div>
                        <div class="set-middle-list">
                            <ul>
                                <li>
                                    <div class="set-ali">阿里巴巴</div>
                                    <div class="set-java">Java技术专家</div>
                                    <div class="set-salary">20K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li>
                                    <div class="set-ali">华为</div>
                                    <div class="set-java"> 架构师</div>
                                    <div class="set-salary">25K - 50K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li>
                                    <div class="set-ali">京东商城</div>
                                    <div class="set-java">web前端工程师</div>
                                    <div class="set-salary">20K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li>
                                    <div class="set-ali">小米</div>
                                    <div class="set-java">Java技术专家</div>
                                    <div class="set-salary">30K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li style="border-bottom:none">
                                    <div class="set-ali">网易</div>
                                    <div class="set-java">自身IOS开发</div>
                                    <div class="set-salary">10K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
                <ul class="set-middle-item">
                    <li>
                        <div class="set-middle-image">
                            <img src="images/item001.png" alt="">
                            <img src="images/item002.png" alt="">
                            <img src="images/item003.png" alt="">
                            <img src="images/item004.png" alt="">
                            <img src="images/item005.png" alt="">
                            <img src="images/item006.png" alt="">
                            <img src="images/item007.png" alt="">
                            <img src="images/item008.png" alt="">
                        </div>
                        <div class="set-middle-list">
                            <ul>
                                <li>
                                    <div class="set-ali">阿里巴巴</div>
                                    <div class="set-java">Java技术专家</div>
                                    <div class="set-salary">20K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li>
                                    <div class="set-ali">华为</div>
                                    <div class="set-java"> 架构师</div>
                                    <div class="set-salary">25K - 50K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li>
                                    <div class="set-ali">京东商城</div>
                                    <div class="set-java">web前端工程师</div>
                                    <div class="set-salary">20K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li>
                                    <div class="set-ali">小米</div>
                                    <div class="set-java">Java技术专家</div>
                                    <div class="set-salary">30K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li style="border-bottom:none">
                                    <div class="set-ali">网易</div>
                                    <div class="set-java">自身IOS开发</div>
                                    <div class="set-salary">10K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
                <ul class="set-middle-item">
                    <li>
                        <div class="set-middle-image">
                            <img src="images/item001.png" alt="">
                            <img src="images/item002.png" alt="">
                            <img src="images/item003.png" alt="">
                            <img src="images/item004.png" alt="">
                            <img src="images/item005.png" alt="">
                            <img src="images/item006.png" alt="">
                            <img src="images/item007.png" alt="">
                            <img src="images/item008.png" alt="">
                        </div>
                        <div class="set-middle-list">
                            <ul>
                                <li>
                                    <div class="set-ali">阿里巴巴</div>
                                    <div class="set-java">Java技术专家</div>
                                    <div class="set-salary">20K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li>
                                    <div class="set-ali">华为</div>
                                    <div class="set-java"> 架构师</div>
                                    <div class="set-salary">25K - 50K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li>
                                    <div class="set-ali">京东商城</div>
                                    <div class="set-java">web前端工程师</div>
                                    <div class="set-salary">20K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li>
                                    <div class="set-ali">小米</div>
                                    <div class="set-java">Java技术专家</div>
                                    <div class="set-salary">30K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                                <li style="border-bottom:none">
                                    <div class="set-ali">网易</div>
                                    <div class="set-java">自身IOS开发</div>
                                    <div class="set-salary">10K - 40K</div>
                                    <div class="set-more">更多工作</div>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <script>
            jQuery(".set-content").slide({autoPlay:false,trigger:"click",delayTime:700,pnLoop:false});
        </script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到