防刷新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
防刷新jq左侧滚动条导航展示的更多相关文章
- jQuery防京东浮动网站楼层导航代码
jQuery防京东浮动网站楼层导航代码 <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml" ...
- React+Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)
最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...
- Flutter移动电商实战 --(23)分类页_左侧类别导航制作
自动生成dart类 https://javiercbk.github.io/json_to_dart/ 生成的代码 class Autogenerated { String code; String ...
- 隐藏左侧快速导航除DMS导航树之外的其他区域
<style type="text/css"> /*隐藏左侧快速导航除DMS导航树之外的其他区域*/ .ms-quicklaunchouter { display: n ...
- eclipse左侧的导航栏不见了怎么调
点击eclipse上方导航栏的window 然后再点击Reset Perspective 这样左侧的导航栏就出来了
- #AOS应用基础平台# 实现了在用户权限范围内自己定义的快捷菜单的导航展示
from=501" style="color:rgb(255,131,115); padding:0px; margin:0px; font-family:微软雅黑,Verdana ...
- spring boot 学习(九)小工具篇:?秒防刷新
注解 + 拦截器:?秒防刷新 小工具篇:工具许多都是我以前在 github 之类开源平台找到的小工具类,作者的信息什么的许多都忘了.先说声不好意思了.若有相关信息,麻烦提醒一下~ 解释 所谓的?秒防刷 ...
- jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条
jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒 ...
- 18 ~ express ~ 前台分类导航展示 与 排序
一,前台分类导航展示 1,后台文件: /router/main.js router.get('/',(req,res,next)=>{ /** * 从数据库中读取分类信息 * rs是一个数组类 ...
随机推荐
- UVa 11300 Spreading the Wealth(有钱同使)
p.MsoNormal { margin: 0pt; margin-bottom: .0001pt; text-align: justify; font-family: "Times New ...
- linux详细redis安装和php中redis扩展
第一部分:安装redis 希望将redis安装到此目录 1 /usr/local/redis 希望将安装包下载到此目录 1 /usr/local/src 那么安装过程指令如下: 1 2 3 4 5 6 ...
- js正则表达式入门
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 【matlab】查看程序运行时间
程序开头 profile on 结尾 profile viewer 然后就会很贴心滴出现下面的界面,可以从中展开,查看每段运行的时间
- DOS批处理不支持将UNC 路径作为当前目录的巧妙解决方案
DOS批处理不支持将UNC 路径作为当前目录的巧妙解决方案在有些时候,需要在批处理中操作UNC目录,但批处理并不能直接对UNC目录进行操作,怎么办? 废话少说,直接上代码,打开网上邻居→整个网络→Mi ...
- cocos2d-x lua绑定解析
花了几天时间看了下cocos2d-x lua绑定那块,总算是基本搞明白了,下面分三部分解析lua绑定: 一.lua绑定主要用到的底层函数 lua绑定其本质就是有一个公用的lua_Stack来进行C和L ...
- hdu 5877/ 2016 ACM/ICPC Dalian Online 1010 Weak Pair
题目链接 分析:树上的节点祖先与儿子的关系,一般就会想到dfs序.正解就是对树先进行dfs序排列,再将问题转化到树状数组统计个数.应该把节点按照权值从大到小排序,这样对于,就是从小到大的顺序.这样更新 ...
- Canvas 画布小案例
<script> window.onload = function () { draw('canvas1'); draw('canvas2'); draw('canvas3'); draw ...
- OC面向对象—封装
OC面向对象—封装 一.面向对象和封装 面向对象的三大特性:封装(成员变量).继承和多态 在OC语言中,使用@interface和@implementation来处理类. @interface就好像暴 ...
- Five More Hacker Tools Every CISO Should Understand
As we mentioned in the first article, Top Five Hacker Tools Every CISO Should Understand, the role o ...