栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

jquery中实现简单的tabs插件功能的代码

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

jquery中实现简单的tabs插件功能的代码

言归正传,以下是全文。

先附上两张最简单的效果图。

首先编写简单的HTML代码。用作tabs的UL标签和包含内容的p标签。

  • 海阔天空
  • 光辉岁月
  • 真的爱你
简单起见,我只写三个。

今天我,寒夜里看雪飘过。怀着冷却了的心窝飘远方……仍然自由自我,永远高唱我歌,走遍千里。

钟声响起归家的讯号,在他生命里仿佛带点唏嘘……自信可改变未来,问谁又能做到。

无法可修饰的一对手,带出温暖永远在背后……请准我说声,真的爱你。

所有外观不用图片,简简单单就行,因此全部使用CSS。这边我挑比较重要的写。

li{float:left;}

a{display:block;border:solid 1px #000;}

div{border:solid 1px #000;margin-top=-1px;}

.selected{border-bottom-color:#FFF; color:#F00;}//把选中tab底部的边框颜色设为跟内容背景一样的颜色

重头戏来了,那就是如何用简单的jquery实现tabs功能。
复制代码 代码如下:


以上是全部内容,感兴趣的可以去随便测试一下。谢谢大家。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/114474.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号