jquery招聘網站tab選項卡切換布局



66 262 88



特效描述: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

加群請備注:從官網了解到

老夫子电子