<%@ 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. hadoop 2.4 伪分布式模式

    1.core-site.xml 在<configuration></configuration>中插入 <property> <name>fs.defa ...

  2. RelativeLayout不能调用measure去直接测量子元素

    RelativeLayout在实现onMeasure方法时并没有像LinearLayout一样去重写如下代码: @Override protected void onMeasure(int width ...

  3. 安装MVC3后没有dbcontext生成器的解决方案

    安装MVC3后,采用DBFIRS的方式,从数据库生成模型,这样生成的类是基于ObjectContext的,无法使用DbContext的一些方法,比如Set.Find.Entry等.需要用ADO.NET ...

  4. Magento white screen or how XML can break your site?

    Magento white screen or how XML can break your site? by SANDO on 02. OCT, 2012 in MAGENTO, SMALL TIP ...

  5. js判断是否为空火undefined是否给undefined加引号

    js判断是否为空为undefined如果判断的是类型则用typeof(),如果其本身就是“undefind”字符窜,则不能这样判断, 这样typeof之后是字符串类型就判断不出来了,这是需要去掉typ ...

  6. 我的第一个WCF程序，很简单适合我等菜鸟

    1.首先我罗列一下网站搜索并经过自己理解的WCF的含义: 1)WCF:(WIndows Communication Foundation)是由微软是由微软发展的一组数据通信的应用开发接口,可以翻译为W ...

  7. oracle视图V$BH && X$BH的使用列子

    1创建一个测试表,test,并且插入10000行数据:    SQL>  create table test (id int); SQL> begin      2  for i in 1 ...

  8. POJ1528问题解答

    #include <iostream>#include <cstdio>#include <cmath> #include <string>#inclu ...

  9. ios之无限图片轮播器的实现

    首先实现思路:整个collectionView中只有2个cell.中间始终显示第二个cell. 滚动:向前滚动当前cell的脚标为0,向后滚动当前的cell脚标为2.利用当前cell的脚标减去1,得到 ...

  10. ios-XML文档解析之SAX解析

    首先SAX解析xml *xml文档的格式特点是节点,大体思路是把每个最小的子节点作为对象的属性,每个最小子节点的'父'节点作为对象,将节点转化为对象,输出. 每个节点都是成对存在的,有开始有结束.有始 ...