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

  • 相关阅读:
    如何使用Doxygen生成keil工程的代码文档 (how to use doxygen properly with keil)
    使用matlab画相交的平面
    转载:关于循环异步操作 Promise 实现,ES7 的 await 和 async
    小众软件:相见恨晚的 Windows 系统下的 cmd 的命令行替代者 Cmder(完美神器)
    Windows系统环境下Python脚本实现全局“划词复制”功能
    Ubuntu shell 命令行路径缩短
    shell查找数组是否有特定的值
    保存数据到文件
    左值与右值
    进程与线程的区别
  • 原文地址:https://www.cnblogs.com/mm2015/p/5610780.html
Copyright © 2011-2022 走看看