防刷新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是一个数组类 ...
随机推荐
- Javascript学习笔记:对象的属性类型
在ECMAScript中有两种属性:数据属性和访问器属性 1.数据属性 configurable:表示能否通过delete删除属性从而重新定义属性:或者能否修改属性的特性:或者能否把属性修改为访问器属 ...
- jodaTime 的使用说明
<dependency> <groupId>joda-time</groupId> <artifactId>joda-time</artifact ...
- java使用split切割字符串的时候,注意转义字符
今天在做项目的时候发现一个奇怪的问题 File file = new File("d:\\a.txt"); BufferedReader br = new BufferedRead ...
- ExceptionExtensions
public static class ExceptionExtensions { public static IEnumerable<Exception> GetAllException ...
- Navicat for mysql 破解
想用navicat for mysql 连接mysql,发现只能试用30天,感觉挺不爽的,购买的话发现价格一千多,好贵的软件. 所以想要破解一下,网上试了一些方法不行,最后找到了一种方法可以的 破解工 ...
- akka笔记
Actor UntypedActor actor的基类,继承并实现onReceive方法就可以得到一个Actor. Props 配置类,用Props.create可以创建一个按指定配置生成的Actor ...
- SQL Syntax
1.limit 语法:限制查询记录,进行分页处理:select * from article limit 0,10;(从0号记录开始,依次取10条记录) 2.like 语法:查询指定字符串的相似匹配记 ...
- maven设置
<localRepository>D:/apps/eclipse/env/maven/repository</localRepository>
- iOS开发UI篇—Button基础
iOS开发UI篇—Button基础 一.简单说明 一般情况下,点击某个控件后,会做出相应反应的都是按钮 按钮的功能比较多,既能显示文字,又能显示图片,还能随时调整内部图片和文字的位置 二.按钮的三种状 ...
- StringUtils工具类的常用方法
StringUtils 方法的操作对象是 java.lang.String 类型的对象,是对 JDK 提供的 String 类型操作方法的补充,并且是 null 安全的(即如果输入参数 String ...