防刷新jq左侧滚动条导航展示

html代码:

<div class="fangchan_navcont">
        <div class="fangchan_nav">
            <ul class="navul" style="width: 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

上一篇:Android两级导航菜单栏的实现--FragmentTabHost结合ViewPager与Android 开源项目PagerSlidingTabStrip


下一篇:用jq动态给导航菜单添加active