防刷新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是一个数组类 ...
随机推荐
- ajax是异步的,异步取数据,如何能保证数据是存在的。
https://segmentfault.com/q/1010000002964172 ajax是异步的,所以aa()在执行的时候,return的那个result本身就是空的,在此后的某些秒以后,re ...
- JavaScript中的Math对象
Math对象中提供的计算功能执行起来比你在代码中写的js要快得多,这是它的一个很好的优点. 属性: 属性 说明 Math.E 即常量e的值 Math.LN10 ln10 Math.LN2 ln2 ...
- MFC编程入门之九(对话框:为控件添加消息处理函数)
这一节讲的主要内容是如何为控件添加消息处理函数. MFC为对话框和控件定义了诸多消息,我们对他们操作时会触发消息,这些消息最终由消息处理函数处理,比如我们点击按钮时就会产生BN_CLICKED消息,修 ...
- Myeclipse 找不到Convert to maven project选项
https://my.oschina.net/u/2419190/blog/504417 Window > Preferences > General > Capabilities ...
- 笨办法学 Python (Learn Python The Hard Way)
最近在看:笨办法学 Python (Learn Python The Hard Way) Contents: 译者前言 前言:笨办法更简单 习题 0: 准备工作 习题 1: 第一个程序 习题 2: 注 ...
- centos 装VBOX
#cd /etc/yum.repos.d/wget http://download.virtualbox.org/virtualbox/rpm/rhel/virtualbox.repoyum inst ...
- 图的深度优先和广度优先遍历(图以邻接表表示,由C++面向对象实现)
学习了图的深度优先和广度优先遍历,发现不管是教材还是网上,大都为C语言函数式实现,为了加深理解,我以C++面向对象的方式把图的深度优先和广度优先遍历重写了一遍. 废话不多说,直接上代码: #inclu ...
- chrome浏览器遇到的异常
昨天写了一个二进制输出图片的方法,发现在chrome浏览器里面出了异常: (failed) net::ERR_INCOMPLETE_CHUNKED_ENCODING 代码是这样写的: //直接输出 ...
- 注册Github
注册Github 1.打开Github网页 2.设置用户名.邮箱.密码(右侧会显示是否可以使用),点击注册 3.此时邮箱会发来来自Github的注册消息,进入邮箱,点连接,完成注册 4.注册成功
- iOS开发UI篇—transframe属性(形变)
iOS开发UI篇—transframe属性(形变) 1. transform属性 在OC中,通过transform属性可以修改对象的平移.缩放比例和旋转角度 常用的创建transform结构体方法分两 ...