zoukankan      html  css  js  c++  java
  • 防刷新jq左侧滚动条导航展示

    html代码:

    <div class="fangchan_navcont">
            <div class="fangchan_nav">
                <ul class="navul" style=" 600px;">
                <li><a href="/fenlei/fangchan.html">全部</a></li>
                    <li><a href="/fenlei/fwcz.html">房屋出租</a></li>

          <li class="liactive"><a href="/fenlei/esf.html">二手房</a></li>

          <li><a href="/fenlei/fwqg.html">房屋求购</a></li>

          <li><a href="/fenlei/fwqz.html">房屋求租</a></li>

          <li><a href="/fenlei/spzr.html">商铺转让</a></li>                
                    <div class="clear"></div>
                </ul>
            </div>
        </div>

    <script>
            var navulsize = $('.navul li').size();
                var navulwidth = $('.navul li').width();
                var allwidth = navulwidth*navulsize;
                $('.navul').width(allwidth);
                $('.navul li').click(function(){
                    var index = $(this).index();
                    var indexur = '#' + index;
                    var indexurl = $(this).children('a').attr('href');
                    var hehref = indexurl + indexur;
                    var data = $(this).attr('data');
                    $(this).children('a').attr('href',hehref);
                    $(data).show().siblings('.gengxinbox').hide();
                    $(this).addClass('liactive').siblings('li').removeClass('liactive');
                });
                $(function(){
                    var endhref = location.href;
                    var parsenum = parseInt(endhref.replace(/[^0-9]/ig,""));
                    var positionleft = $('.navul li:eq('+parsenum+')').offset().left;
                    $('html,.fangchan_nav').animate({scrollLeft:positionleft+'px'}, 0);
                });
            </script>

    实例地址:http://m.qingzhou.cc/fenlei/fangchan.html#0

  • 相关阅读:
    HDU 1540 Tunnel Warfare (线段树区间合并)
    P2258 子矩阵
    P5021 赛道修建
    P4084 [USACO17DEC]Barn Painting
    P3914 染色计数
    比赛用模板
    P3594 [POI2015]WIL-Wilcze doły
    P5022 旅行
    P3952 时间复杂度
    P3960 列队
  • 原文地址:https://www.cnblogs.com/mm2015/p/5610780.html
Copyright © 2011-2022 走看看