用split()根据选项卡在url后面添加锚值
来源:互联网 发布:股市交易软件 编辑:程序博客网 时间:2024/06/03 05:51
请看代码如下:
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery实现tab标签切换效果</title> <script src="jquery/jquery 2.0.3/jquery-2.0.3.min.js"></script> <style> * { margin: 0; padding: 0; list-style: none; } body { font: 12px/1.5 Tahoma; } #outer { width: 450px; margin: 150px auto; } #tab { overflow: hidden; zoom: 1; background: #afd; border: 1px solid #afd; } #tab li { float: left; color: #000; height: 30px; cursor: pointer; line-height: 30px; padding: 0 20px; } #tab li.current { color: #afd; background: #d9f; } #content { border: 1px solid #afd; border-top-width: 0; } #content ul { line-height: 25px; display: none; margin: 0 30px; padding: 10px 0; } </style></head><body> <div id="outer"> <ul id="tab"> <li id="tab1" class="current">tab1</li> <li id="tab2">tab2</li> <li id="tab3">tab3</li> </ul> <div id="content"> <ul style="display:block;"> <a href="">内容111</a> </ul> <ul> <a href="">内容222</a> </ul> <ul> <a href="">内容333</a> </ul> </div> </div> <script> $(function() { window.onload = function() { var $a = $('#tab li'); var $b = $('#content ul'); $a.click(function() { var $this = $(this); //$(this)表示把$a转换为jQuery对象,然后赋值给$this这个变量 var $t = $this.index(); //相当于$this的兄弟元素赋值给 $t $a.removeClass(); $this.addClass('current'); $b.css('display', 'none'); $b.eq($t).css('display', 'block'); //遍历$t var locationHref = window.location.href;//取当前url window.location.href = locationHref.split('#')[0] + '#' + this.id;//用#分割取第一个值,然后+#+id }) } var _hash = window.location.hash;//取锚值,从#开始 console.log(_hash); if(_hash == "#tab1"){ $("#tab1").click(); }else if(_hash == "#tab2"){ $("#tab2").click(); }else{ $("#tab3").click(); } }); </script></body></html>
效果如图所示:
0 0
- 用split()根据选项卡在url后面添加锚值
- 在textfield后面添加字符串
- 根据输入选项shell脚本添加信息
- eclipse中File--New后面的选项,怎么添加其他选项及删除一些选项
- eclipse中File--New后面的选项,怎么添加其他选项及删除一些选项
- 在statusBar 后面添加一层视图方法
- js在指定tr后面添加tr
- ext在textfield 后面添加一个button
- ueditor在鼠标后面添加内容
- 在ListView的后面添加View
- 在数组后面添加指定元素
- 如何获取URL后面锚点ID
- java split的一个应用,保留后面空值
- java split的一个应用,保留后面空值
- 在选项卡上添加对话框(VC)
- 在代码中为选项卡添加内容
- 在TabControl中的TabPage选项卡中添加Form窗体
- 在TabControl中的TabPage选项卡中添加Form窗体
- 用Groovy思考 第一章 用Groovy简化Java代码
- c++primer plus 第六版第四章编程习题
- 深入浅出 JIT 编译器
- 静态类,抽象类,接口
- su root 与 su - root 的区别
- 用split()根据选项卡在url后面添加锚值
- 用service启动nginx
- 配置根据时间自动配置build
- java kettle 初步
- 文档解析之XML文档读取
- caffe增加自己的layer实战(中)--caffe学习(11)
- Linux平台的SVN服务器的配置及搭建
- LeetCode 1 Two Sum
- Android 系列 5.1使用自定义字体