<!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. 
						
  2. Jquery网页选项卡应用
		
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
    
		
    3. 
						
  3. 第二百节，jQuery EasyUI，Tabs(选项卡)组件
		
    jQuery EasyUI,Tabs(选项卡)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 5.选项卡面板 本节课重点了解 EasyUI 中 Tabs(选项卡)组件的使用方 ...
    
		
    4. 
						
  4. jQuery中常用网页效果应用
		
    一.常用网页效果应用 1.表单应用 表单由表单标签.表单域和表单按钮组成. 1.1单行文本框应用 例:获取和失去焦点改变样式 首先,在网页中创建一个表单,HTML代码如下 <form actio ...
    
		
    5. 
						
  5. [JS]jQuery,javascript获得网页的高度和宽度
		
    [JS]jQuery,javascript获得网页的高度和宽度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeigh ...
    
		
    6. 
						
  6. 基于jquery打造的网页右侧自动收缩浮动在线客服代码
		
    基于jquery打造的网页右侧自动收缩浮动在线QQ客服代码, 当前比较流行的一款QQ在线jquery特效代码, 代码中还带有IE6下PNG图片透明的特效,如果想研究IE6下PNG透明的同学也可以下载研 ...
    
		
    7. 
						
  7. 基于jQuery扁平多颜色选项卡切换代码
		
    基于jQuery扁平多颜色选项卡切换代码,支持自动轮播切换,鼠标滑过切换的jQuery特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...
    
		
    8. 
						
  8. .Net拾忆：从List去除重复-拾忆集合
		
    方法1: private static List<int> DistinctList(List<int> list) {//去除重复 HashSet<int> ha ...
    
		
    9. 
						
  9. jQuery实现高亮显示网页关键词的方法
		
    本文实例讲述了jQuery实现高亮显示网页关键词的方法.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的高亮显示网页上搜索关键词的代码,当你在文本框中输入的时候,如果下面的正文中包括你 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Android与H5交互
			
    1.初始化WebView控件 webView = (WebView) findViewById(R.id.webview); 2.设置WebView属性 WebSettings webSettings ...
    
			
    2. 
						
  2. flex的兼容
			
    父容器的 display 属性: .box{ display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit br ...
    
			
    3. 
						
  3. ThreadPoolExecutor源码学习（2）--  在thrift中的应用
			
    thrift作为一个从底到上除去业务逻辑代码,可以生成多种语言客户端以及服务器代码,涵盖了网络,IO,进程,线程管理的框架,着实庞大,不过它层次清晰,4层每层解决不同的问题,可以按需取用,相当方便.  ...
    
			
    4. 
						
  4. 初步认识Less
			
    LESS 是一个流行的样式表语言,它提供了 CSS3 也未曾实现的多种功能,让您编写 CSS 更加方便,更加直观.LESS 已经被广泛使用在多种框架中 ( 例如:BootStrap).本文将介绍 LE ...
    
			
    5. 
						
  5. nginx超时重发
			
    最近一直遇到一个bug: 客户端会二次请求服务端,服务端多次调用remote服务. 特点是,这些请求都是模型切片相关的,耗时很长的请求,往往需要1分钟左右. 开始以为是客户端代码有问题,进行了二次请求 ...
    
			
    6. 
						
  6. C++ 控制台代码输出控制
			
    在C++控制台应用程序中可以控制控制台输出的字体颜色和 接受任意按键退出 #ifndef CONSOLE_UTILS_H #define CONSOLE_UTILS_H #include <wi ...
    
			
    7. 
						
  7. Hadoop-1.2.1 升级到Hadoop-2.6.0 HA
			
      Hadoop-1.2.1到Hadoop-2.6.0升级指南   作者 陈雪冰 修改日期 2015-04-24 版本 1.0     本文以hadoop-1.2.1升级到hadoop-2.6.0 Z ...
    
			
    8. 
						
  8. WPF之命令浅谈
			
    一.认识命令 1.1命令的特点 提到“命令”,我们应该想到命令的发出者,命令的接受者,命令的内容,准备工作,完成任务,回报工作...与事件中的发送者,接受者,消息,处理,处理,处理一一对应,如果是单纯 ...
    
			
    9. 
						
  9. PAT/字符串处理习题集（二）
			
    B1024. 科学计数法 (20) Description: 科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,其满足正则表达式[+-][1-9]"."[0-9]+E[+ ...
    
			
    10. 
						
  10. like语句百分号前置会使用到索引吗？
			
    like语句百分号前置会使用到索引吗? 前几天看了这篇文章:谈SQL Server对like '%关键词%' 处理时的索引利用问题 看完了之后,我很想知道这篇文章是不是临时工写的?还是网站的主人写的, ...
    
			
    11.