HTML锚点参考

锚点参考

    <ul class="banner-pic">

        <li style="background: url(../Content/images/new_cert/recruit/banner_test.jpg) no-repeat center; height: 355px" title="了解招聘">

            <a href="javascript:;">@*火热资讯*@</a>

        </li>

        <li style="background: url(../Content/images/new_cert/recruit/banner_test.jpg) no-repeat center; height: 355px" title="网上申请">

            <a href="javascript:;">@*全程服务*@</a>

        </li>

        <li style="background: url(../Content/images/new_cert/recruit/banner_test.jpg) no-repeat center; height: 355px" title="笔试">

            <a href="javascript:;">@*真题资料*@</a>

        </li>

        <li style="background: url(../Content/images/new_cert/recruit/banner.png) no-repeat center; height: 355px" title="课程介绍">

            <a href="javascript:;">@*精品课程*@</a>

        </li>

    </ul>

var aLi = null;

    $(function () {

        aLi = $(".tab").find("li");

        aLi.click(function () {

            if ($(this).index() == 0) {

                removerClass();

                aLi.addClass("one-active");

                $(".content-box").find(".font").hide();

                $(".content-box").find(".font").eq($(this).index()).show();

            } else if ($(this).index() == 1) {

                removerClass();

                aLi.addClass("two-active");

                $(".content-box").find(".font").hide();

                $(".content-box").find(".font").eq($(this).index()).show();

            } else if ($(this).index() == 2) {

                removerClass();

                aLi.addClass("three-active");

                $(".content-box").find(".font").hide();

                $(".content-box").find(".font").eq($(this).index()).show();

            } else if ($(this).index() == 3) {

                removerClass();

                aLi.addClass("four-active");

                $(".content-box").find(".font").hide();

                $(".content-box").find(".font").eq($(this).index()).show();

            } else if ($(this).index() == 4) {

                removerClass();

                aLi.addClass("five-active");

                $(".content-box").find(".font").hide();

                $(".content-box").find(".font").eq($(this).index()).show();

            }

        })

        //banner大图切换

        $(".banner").slide({

            titCell: ".num ul",

            mainCell: ".banner-pic",

            effect: "fold",

            autoPlay: true,

            delayTime: 700,

            autoPage: true

        });

        var aBannerLi = $(".banner-pic").find("li");

        aBannerLi.click(function () {

            if ($(this).get(0).title == "了解招聘") {

                $("html,body").animate({ scrollTop: $(".s-news").offset().top }, 900);

                aLi.eq(0).trigger("click");

            }

            if ($(this).get(0).title == "网上申请") {

                $("html,body").animate({ scrollTop: $(".s-news").offset().top }, 900);

                aLi.eq(1).trigger("click");

            }

            if ($(this).get(0).title == "笔试") {

                $("html,body").animate({ scrollTop: $(".s-news").offset().top }, 900);

                aLi.eq(2).trigger("click");

            }

            if ($(this).get(0).title == "课程介绍") {

                $("html,body").animate({ scrollTop: $(".s-products").offset().top }, 900);

            }

        })

    });