<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页选项卡</title>
<style>
*{ margin:0; padding:0;}
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
.tab { width:440px;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}
</style> </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>
<script src="js/jquery.js"></script>
<script> //为li元素绑定单击事件
var $div_li=$("div .tab_menu ul li");
$div_li.click(function(){ $(this).addClass("selected")//当前单击的li元素高亮
.siblings().removeClass("selected");//去掉其他同辈li元素的高亮
var index=$div_li.index(this);//获取当前单击<li>元素在全部<li>元素中的索引
$("div .tab_box>div")//选择子节点
.eq(index).show()//显示<li>元素对应的<div>元素
.siblings().hide();//隐藏其他几个同辈的<div>元素 }).hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
}) </script>
</body>
</html>
												

jquery实现的网页选项卡(拾忆)的更多相关文章

  1. JQuery 网页选项卡制作

    网页选项卡可以较好的利用有限的页面来展示更多的元素,而使用JQuery来制作网页选项卡也是一件非常简单的事情.今天就来分享一个网页选项卡的制作小技巧. 引入所需库 选项卡原理 业务核心 完整小例子 引 ...

  2. Jquery网页选项卡应用

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. 第二百节,jQuery EasyUI,Tabs(选项卡)组件

    jQuery EasyUI,Tabs(选项卡)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 5.选项卡面板 本节课重点了解 EasyUI 中 Tabs(选项卡)组件的使用方 ...

  4. jQuery中常用网页效果应用

    一.常用网页效果应用 1.表单应用 表单由表单标签.表单域和表单按钮组成. 1.1单行文本框应用 例:获取和失去焦点改变样式 首先,在网页中创建一个表单,HTML代码如下 <form actio ...

  5. [JS]jQuery,javascript获得网页的高度和宽度

    [JS]jQuery,javascript获得网页的高度和宽度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeigh ...

  6. 基于jquery打造的网页右侧自动收缩浮动在线客服代码

    基于jquery打造的网页右侧自动收缩浮动在线QQ客服代码, 当前比较流行的一款QQ在线jquery特效代码, 代码中还带有IE6下PNG图片透明的特效,如果想研究IE6下PNG透明的同学也可以下载研 ...

  7. 基于jQuery扁平多颜色选项卡切换代码

    基于jQuery扁平多颜色选项卡切换代码,支持自动轮播切换,鼠标滑过切换的jQuery特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  8. .Net拾忆:从List去除重复-拾忆集合

    方法1: private static List<int> DistinctList(List<int> list) {//去除重复 HashSet<int> ha ...

  9. jQuery实现高亮显示网页关键词的方法

    本文实例讲述了jQuery实现高亮显示网页关键词的方法.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的高亮显示网页上搜索关键词的代码,当你在文本框中输入的时候,如果下面的正文中包括你 ...

随机推荐

  1. Linux Shell 截取字符串

    Linux Shell 截取字符串 shell中截取字符串的方法很多 ${var#*/} ${var##*/} ${var%/*} ${var%%/*} ${var:start:len} ${var: ...

  2. Qt for Mac 安装(包括PyQt)

    下载Qt: http://qt-project.org/downloads Qt5.2 for Mac:http://download.qt-project.org/official_releases ...

  3. 最小生成树 prime zoj1586

    题意:在n个星球,每2个星球之间的联通需要依靠一个网络适配器,每个星球喜欢的网络适配器的价钱不同,先给你一个n,然后n个数,代表第i个星球喜爱的网络适配器的价钱,然后给出一个矩阵M[i][j]代表第i ...

  4. replace实现正则过滤替换非法字符

    html+js结构如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  5. cordova插件开发注意事项

    1. 编写插件,先创建好cordova项目之后,在项目里开发调试好在去创建插件目录 如何在cordova项目里创建呢,在android文件夹下面的res/xml/config.xml里去加入插件 例如 ...

  6. finally回收资源

    Java中的垃圾回收机制,也就是GC不会回收任何物理资源,垃圾回收机制只回收堆内存中对象所占用的内存,所以其他的物理资源需要用finally来回收. 如果try块中的某条语句引起了异常,该异常就会被c ...

  7. laravel中TokenMismatchException异常处理

    在使用post或者put等方法请求时,有时会报TokenMismatchException in VerifyCsrfToken.php line 67错误.原因是laravel默认开启了防CSRF. ...

  8. C/C++编译和链接过程详解 (重定向表,导出符号表,未解决符号表)

    详解link  有 些人写C/C++(以下假定为C++)程序,对unresolved external link或者duplicated external simbol的错误信息不知所措(因为这样的错 ...

  9. ASP.Net请求处理机制初步探索之旅 - Part 4 WebForm页面生命周期

    开篇:上一篇我们了解了所谓的请求处理管道,在众多的事件中微软开放了19个重要的事件给我们,我们可以注入一些自定义的业务逻辑实现应用的个性化设计.本篇,我们来看看WebForm模式下的页面生命周期. ( ...

  10. 人人都是 DBA(XII)查询信息收集脚本汇编

    什么?有个 SQL 执行了 8 秒! 哪里出了问题?臣妾不知道啊,得找 DBA 啊. DBA 人呢?离职了!!擦!!! 程序员在无处寻求帮助时,就得想办法自救,努力让自己变成 "伪 DBA& ...