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);
            }
        })


    });