首页>>老刘专栏
首先,让我们看看选项卡效果是什么样的。以经常能遇到的QQ新闻为例,它具有以下效果:
当鼠标滑过相关标题时,对应于该标题的内容将会出现。这是选项卡的滑动切换效果。选项卡效果还包括延迟切换和自动切换效果。今天,让我们学习选项卡滑动效果。
html代码使用两个div来包含标题和内容,因此标题数和内容数必须相同。 详细的html代码和CSS代码如下所示:
html代码:
<div id="tabbox">
<ul class="tabs sjwu" id="tabs2">
<li>友情链接</li>
<li>底部导航</li>
</ul>
<ul class="tab_conbox sjwu" id="tab_conbox2">
<li class="tab_con">
<p>
<a href='/' target='_blank'>合肥SEO</a>
</p>
</li>
<li class="tab_con">
<p>
<a href='/content/89.html' target='_blank'>单页面做优化</a>
</p>
</li>
</ul>
</div>
css代码就不贴了,有兴趣的朋友直接用DevTool工具查看;
拖动转换实际效果,简而言之,就是说当鼠标滑过的那时候,显示信息题目下的內容。必须将当前的标题样式设置为选定状态,在同一时间将该标题下的內容设置为显示,即设置样式display:block,而其他标题下的内容设置为隐藏,即设置样式display:none。详细的javascript代码如下所示:
<script type="text/javascript">
$(document).ready(function() {
jQuery.jqtab = function(tabtit,tab_conbox,shijian) {
$(tab_conbox).find("li").hide();
$(tabtit).find("li:first").addClass("thistab").show();
$(tab_conbox).find("li:first").show();
$(tabtit).find("li").bind(shijian,function(){
$(this).addClass("thistab").siblings("li").removeClass("thistab");
var activeindex = $(tabtit).find("li").index(this);
$(tab_conbox).children().eq(activeindex).show().siblings().hide();
return false;
});
};
/*调用方法如下:*/
$.jqtab("#tabs","#tab_conbox","click");
$.jqtab("#tabs2","#tab_conbox2","mouseenter");
});
</script>
注:Mouseover:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。
Mouseenter:只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
这里使用的是Mouseenter,mouseenter子元素不会反复触发事件,否则在IE中经常有闪烁情况发生。
在浏览器中的效果如下所示:
当鼠标过相关标题的时候,标题中对应的内容则会显示出来(没错就是网站底部的tab切换)。
今天,我和大家分享了Tab的滑动切换效果,希望给大家一个热身,掌握Tab的原理。其实滑动切换、延时切换和自动切换三种效果相对容易实现。要是发觉有的地方填错了或是写的不太好,可以给我留言,欢迎大伙儿指点迷津!我们一起来加油!感谢阅读。
猜你喜欢
- 2020-12-29除了更新文章和发外链,SEO还有什么作用?
- 2020-12-23合肥seo服务一般有哪些方面?
- 2020-12-11你总说SEO不行,但我想说你不懂SEO!到底SEO应该如何有效?
- 2020-12-01所有SEO执行人员都应考虑这几点
- 2020-11-25搜索引擎优化适合什么人学?
- 2020-10-20如何利用Google的“WebStory”功能提高点击率?
- 搜索
-
- 2021-01-13百度惊雷算法3.0,严厉打击刷点击作弊行···
- 2021-01-13惊雷算法3.0即将上线 持续打击刷点击作···
- 2021-01-07织梦新闻列表从第二篇开始调用的解决方法
- 2021-01-06百度移动端的搜索结果上线“踩顶”功能,对···
- 2021-01-04SEO未来的重点是战略还是技术?
- 2020-12-31做 seo修改网站会被降权处罚吗?事实是···
- 2020-12-29除了更新文章和发外链,SEO还有什么作用···
- 2020-12-23合肥seo服务一般有哪些方面?
- 2020-12-23怎么知道你们的关键词优化真的有效果?
- 2020-12-11百度搜索引擎喜欢哪种手机网站模板?为啥图···
- 2020-12-11移动搜索引擎优化是独立域名还是自适应?
- 2020-12-11公司网络营销推广的投资成本要多少?
- 2019-11-01Origin DNS error:使用百···
- 2019-08-12网站出现“403,服务器上文件或目录拒绝···
- 2019-11-06正确打开.db数据库文件的两种方式,避免···
- 2019-12-09域名解析后,网站返回状态码511应对方法
- 2019-10-08靠模拟点击刷排名的百度快排还有没有用?
- 2019-07-04使用js实现tab选项卡滑动切换效果
- 2020-04-23百度提权是什么意思?整站提权相关都在这里···
- 2019-12-20百家号绑定的企业可以解绑百度账号吗?
- 2020-01-312020年不一样的春节,武汉加油,中国加···
- 2020-02-01落地在家办公,如何推进工作效率?
- 2019-11-04域名解析中cname和A记录,对于百度优···
- 2019-04-02网站首页收录不见了,只剩内页收录是什么原···
- 2019-03-31千万不要使用刷百度排名工具(模拟百度点击···
- 2019-12-27事实告诉你,网站点击率对于排名的影响因素
- 2020-06-10新站优化必备操作,你都会了吗?
- 2019-09-23"语义效应”事实上就是现实中常说的“话术···
- 2020-01-03手机站做关键词优化必须要留意哪几个问题?
- 2019-11-13重复收录风险:https改造导致的url···
- 2019-11-27网站排名优化之“无疾而终”:排名无故消失···
- 2019-03-31FTP软件是什么,怎么使用?
- 2019-03-03移动化中自适应、跳转适配和代码适配三种方···
- 2019-07-04使用js实现tab选项卡滑动切换效果
- 2020-06-102020年中期,百度SEO,过时的4个策···
- 2019-03-18为啥网站一直没收录?
- 热门标签
-
- tab切换
- 选项卡滑动切换
- 在家办公
- 百度快排
- 快速排名
- SEO快排
- FTP
- ftp隐藏文件
- 百度
- 谷歌
- pagerank算法
- 算法原理
- 语义效应
- 话术技巧
- 万词霸屏
- SEO优化
- 按天计费系统
- 搜索推广模式对比
- SEO优化师
- seo工资
- 达克效应
- 认知局限
- 交流分享
- 锚定效应
- 百度熊掌号
- 401错误
- 401未授权
- 网页劫持
- 360算法
- 后羿算法
- 伪静态
- 纯静态
- seo友好度
- SEO
- SEO实践
- 屏蔽右键
- 禁止右键
- 禁止查看源代码
- seo改版
- 网站改版周期
- SEO快速排名
- 百度算法
- 算法更新
- 网站排名波动
- 网站惩罚
- 互联网黑话
- 2019it黑话
- 头条权重
- 私域流量
- 跳出率
- 用户体验
- 转化率
- seo前景
- seo发展
- 2019冬至
- 冬至
- 合肥seo
- seo公司
- 合肥优化公司
- 选择seo公司
- webp转GIF
- webp格式转GIF动图
- webp to gif
- seo误区
- 灰色样式
- seoer
- 提升seo价值
- 网站改版
- 改版后SEO
- 网站被k
- 收录消失
- seo外包
- seo顾问
- spider爬虫
- seo专家
- seo思维塑造
- 黑帽SEO
- 刷快排
- 教育
- 人丑就要多读书
- 百度公告
- 企业主
- seo策略
- seo平衡
- seo和可访问性
- seo监测
- 301重定向
- 首选域名
- 301跳转
- 中文搜索
- 头条搜索
- 中文搜索引擎起源和发展
- seo方案
- 复制seo成功
- 友情链接
- 被惩罚链接
- 外包公司
- seo职业发展
- 新网站