<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jqr.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>jquery</title>

<style type="text/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}

</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>

</body>

</html>
$(function(){

    $div_li = $("div.tab_menu ul li");

    $div_li.click(function(){

        $(this).addClass("selected").siblings().removeClass("selected");

        //var index=$div_li.index(this);

          var index = $(this).index();

        $("div.tab_box > div").eq(index).show().siblings().hide();

    });

});

jquery选项卡切换的更多相关文章

  1. jquery 选项卡切换、选项卡封装、简单的jquery选项卡封装、tab切换效果

    相信选项卡切换是大家常用的效果单独写一个选项卡切换很方便但是要是一个页面出现多个选项卡不做封装的话会显得代码很杂乱 <div class="bodyCenter"> & ...

  2. jquery 选项卡切换 带背景图片

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  3. jquery 选项卡切换

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  4. jQuery 选项卡切换过渡效果

    <!DOCTYPE html> <head> <meta charset="utf-8"> <title></title> ...

  5. 基于jquery左侧带选项卡切换的焦点图

    今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  6. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  7. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

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

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

  9. 基于jquery仿360网站图片选项卡切换代码

    今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

随机推荐

  1. 简单CMakeLists.txt文件

    #CMakeLists.txt cmake_minimum_required(VERSION 2.8) project(server) #添加包含目录 include_directories(./in ...

  2. LightOj1203 - Guarding Bananas（凸包求多边形中的最小角）

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1203 题意:给你一个点集,求凸包中最小的角:模板题,但是刚开始的时候模板带错了,错的我 ...

  3. 获取网络状态ios（2G、3G、4G、Wifi）

    +(NSString *)getNetWorkStates{UIApplication *app = [UIApplication sharedApplication];NSArray *childr ...

  4. 提取日志中的json请求发送到另外一台机器

    将日志中的json请求提取,并且发送到另外一个机器上: for i in ` cat impression.log.2016-04-08-10 |awk -F"\t" ' {pri ...

  5. Java学习-027-JSON 之一 -- 初识

    通常,我们在生活中使用的应用产品(无论是 Web应用还是 App 应用),又或者我们平常的信息交流,均无可避免的存在着信息交互,在信息交互的过程中就有着信息载体的存在.那么,在我们熟知的网络应用产品中 ...

  6. Java学习-021-Properties 获取配置项对应的值

    在日常的脚本编写过程中,通常会获取配置文件中的配置项,以执行相应的业务逻辑. 小二上码...若有不足之处,敬请大神指正,不胜感激! 获取配置项值的源码如下所示: /** * Get value fro ...

  7. synchronized锁自旋2

    http://www.infoq.com/cn/articles/java-se-16-synchronized 1 引言 在多线程并发编程中Synchronized一直是元老级角色,很多人都会称呼它 ...

  8. oracle 中的游标

    oracle 中的游标 通俗易懂的sql代码直接上! --简单的游标使用滴呀 --使用FOR OBJ IN OBJS LOOP ......END LOOP; DECLARE CURSOR C_JOB ...

  9. [转载][MFC]MFC的美化

    转载:http://blog.csdn.net/b_silence/article/details/10489085 前些天用MFC开发一个桌面程序,实现功能后客户说界面太难看,自己仔细看看也着实难看 ...

  10. asp.net中session的原理及应用

    Session简介丶特性 1.Session是一种Web会话中的常用状态之一. 2.Session提供了一种把信息保存在服务器内存中的方式.他能储存任何数据类型,包含自定义对象. 3.每个客户端的Se ...