jquery tab选型卡

image.png

style.css

*{ margin:0; padding:0;} body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;} .tab { width:240px;margin:50px;} .tab_menu { clear:both;} .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;} .tab_menu li.hover { background:#DFDFDF;} .tab_menu li.selected { color:#FFF; background:#6D84B4;} .tab_box { clear:both; border:1px solid #898989; height:100px;} .hide{display:none}

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript" > //<![CDATA[

div_li =

div_li.click(function(){

div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。

(this).addClass("hover"); },function(){ $(this).removeClass("hover"); }) }) //]]> </script> </head> <body>

<div class="tab"> <div class="tab_menu"> <ul> <li class="selected">时事</li> <li>体育</li> <li>娱乐</li> </ul> </div> <div class="tab_box"> <div>时事</div> <div class="hide">体育</div> <div class="hide">娱乐</div> </div> </div>

</body> </html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Core Net

ASP.NET Core 2.2 : 二十一. 内容协商与自定义IActionResult和格式化类

上一章的结尾留下了一个问题:同样是ObjectResult,在执行的时候又是如何被转换成string和JSON两种格式的呢?

8120
来自专栏老码农的一亩三分地

IT兄弟连 JavaWeb教程 文件上传技术

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

7320
来自专栏老码农的一亩三分地

IT兄弟连 JavaWeb教程 JSTL常用标签

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

8010
来自专栏老码农的一亩三分地

IT兄弟连 HTML5教程 HTML5的靠山 RFC、WHATWG是什么WEB的新标准

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

9430
来自专栏C语言入门到精通

基础知识 | 每日一练(120)

小林:老版的 toupper() 和 tolower() 不一定能够正常处理不需要转换的字符参数,例如数字、标点或已经符合请求的字符。在 ANSI/ISO 标准...

9130
来自专栏测试邦

后selenium时代Web UI自动化测试框cypress

优点:selenium 的 API 封装遵循 W3C 提供的 webdriver 标准,很好的支持主流浏览器chrome,firefox,IE,Safari等,...

14320
来自专栏智能计算时代

「首席架构师推荐」React生态系统大集合

16920
来自专栏Java架构沉思录

预防XSS,这几招管用!

大家应该都听过 XSS (Cross-site scripting) 攻击问题,或多或少会有一些了解,但貌似很少有人将这个问题放在心上。一部分人是存有侥幸心理:...

13240
来自专栏前端劝退师

90行代码,15个元素实现无限滚动

无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内容。

18120
来自专栏好好学java的技术栈

几个IDEA的NB插件,还带动态图的。

一款热部署插件,只要不是修改了项目的配置文件,用它都可以实现热部署。收费的,破解比较麻烦。不过功能确实很强大。算是开发必备神器了。热部署快捷键是control+...

7130

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励