效果图：

<!DOCTYPE html>

<html lang="en">

<head>

<style>

*{margin:0;padding: 0}

body{font:normal '宋体' arial ;}

#box{position: relative;left:50%;width: 240px;margin-left: -120px;top:100px;}

#tab_menu ul li{float: left;margin-left: 5px;list-style: none;}

#tab_menu ul li a{display: block;width:37px;height: 21px;line-height:21px;text-decoration: none;border: 1px solid #898989;border-bottom:none;background:#f1f1f1;text-align:center;}

.hover{background: blue;}

#tab_box{width:240px;height: 100px;border :1px solid black;clear:both;}

#tab_menu li a.selected{background: #6D84B4;}

/*这里必须有#tab_menu li,因为是给它加的*/

/*子元素的样式覆盖父元素的样式*/

#tab_menu li .hover{background:white;  }

#tab_box .child_box_2{display: none;}

#tab_box .child_box_3{display: none;}

/*#tab_menu .hover{background:blue;}*/

</style>

 <script src="jquery.js"></script>

 <script type="text/javascript">

 $(function(){

// $('#tab_box .child_box_1').siblings().hide();//如果用这个的话，会出现一闪的情况。

// 说明这个的加载速度比css要慢。

$('#tab_menu li a').each(function(){

    $(this).click(function(){//是每个menu下的a元素

var $id=$(this).attr('id');//获取到当前a元素的Id

// alert($id);

// $(this).addClass('selected').siblings().removeClass('selected');这样的话找不到后面不能删除。他这同辈元素大概没有找到。

$('#tab_box .child_'+$id).show().siblings().hide();//这个是实现div内其他内容隐藏

$(this).addClass('selected').parent().siblings().children().removeClass('selected');//增加删除样式

 }).hover(function(){

$(this).addClass('hover');

 },function(){

 $(this).removeClass('hover');

 });

});

});

 </script>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<div id="box">

    <div id="tab_menu">

<ul>

    <li><a href="#" class='parent selected' id='box_1'>时事</a></li>

    <li><a href="#" class='parent' id='box_2'>体育</a></li>

    <li><a href="#" class='parent' id='box_3'>娱乐</a></li>

</ul>

    </div>

    <div id="tab_box">

        <div class="child_box_1">时事</div>

        <div class="child_box_2">体育</div>

        <div class="child_box_3">娱乐</div>

    </div>

    </div>

</body>

</html>

<!-- 问题1 刚开始就有3个div不能去除

通过$('#tab_box .child_box_1').siblings().hide();隐藏但是会出现一闪的情况说明这个的加载速度比css要慢。
问题2 不能够删除后面添加的颜色，是因为siblings()对象有问题 给添加的应该是li层的颜色，那会简单点，弄a层颜色的话，后面的siblings()要获取到对象得先 parent()后children() 即a 不能获取到被包裹的a得先找到Li后找到a。 li a li a 问题3 不能够增加hover样式和hover样式在选中状态下如何去除 给li元素增加hover()事件 因为#tab_menu设置的是li a 通过子元素a来覆盖父元素li的样式来实现选中的状态下不显示hover效果 -->

jq选项卡切换功能的更多相关文章

  1. Axure实现Tab选项卡切换功能

    这几天用Axure画原型图的过程中,须要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以能够用Axure中的动态面板(Dynamic Panel)来实现. 本文以已经汉化的 ...

  2. 使用jQuery+css实现选项卡切换功能

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  3. AxureRP分页签 / Tab选项卡切换功能~

    最终结果图如下: 实现过程: 1.从元件库中拖一个动态面板,调整所需大小,接下来的步骤都通过双击动态面板来完成. 2.双击动态面板,弹出框“面板状态管理”,新建状态并命名.此处新建了TAB1.TAB2 ...

  4. 【jQuery03】简单的选项卡切换

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. react tab选项卡切换

    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...

  6. Android ViewPager实现选项卡切换

    ViewPager实现选项卡切换,效果图如下: 步骤一:这里使用兼容低版本的v4包进行布局,这里eclipse没有输入提示,所以要手动输入,文件名称“activity_main.xml” <Re ...

  7. js选项卡切换效果

    选项卡切换在页面中比较常见,这里是我利用js闭包还有setTimeout定时器实现的一个比较实用的选项卡功能. <!DOCTYPE html> <html lang="en ...

  8. MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

      概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...

  9. tabs自动切换功能的实现

    <html><head><!-- Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href= ...

随机推荐

  1. STM32嵌入式开发学习笔记（一）

    本文中,笔者将介绍使用嵌入式开发工具Keil uVision5,使用C语言,对微处理器STM32F103C8进行嵌入式开发. 开发使用C语言,首先需要新建一个C语言文件,将其设为主函数的入口,因此,将 ...

  2. A. Srdce and Triangle--“今日头条杯”首届湖北省大学程序设计竞赛（网络同步赛）

    如下图这是“今日头条杯”首届湖北省大学程序设计竞赛的第一题,作为赛后补题 题目描述:链接点此 这套题的github地址(里面包含了数据,题解,现场排名):点此 Let  be a regualr tr ...

  3. JAVA学习之数组

    一.数组定义同一种类型数据的集合,其实数组就是一个容器数组定义格式:1.数据类型[] 变量名 = new 数据类型[数组长度] int[] arr = new int[5]; 2.数据类型[] 数组名 ...

  4. Java进程Runtime、Process、ProcessBuilder调用外部程序

    原文地址:https://blog.csdn.net/c315838651/article/details/72085739 通过Java执行系统命令,与cmd中或者终端上一样执行shell命令,最典 ...

  5. ( 转)WPF面板布局介绍Grid、StackPanel、DockPanel、WrapPanel

    回顾 上一篇,我们介绍了基本控件及控件的重要属性和用法,我们本篇详细介绍WPF中的几种布局容器及每种布局容器的使用场景,当 然这些都是本人在实际项目中的使用经验,可能还存在错误之处,还请大家指出. 本 ...

  6. Apache Flink 整体介绍

    前言 Flink 是一种流式计算框架,为什么我会接触到 Flink 呢?因为我目前在负责的是监控平台的告警部分,负责采集到的监控数据会直接往 kafka 里塞,然后告警这边需要从 kafka topi ...

  7. 前端（二十）—— vue介绍：引用vue、vue实例、实例生命周期钩子

    vue 一.认识Vue 定义:一个构建数据驱动的 web 界面的渐进式框架 优点: 1.可以完全通过客户端浏览器渲染页面,服务器端只提供数据 2.方便构建单页面应用程序(SPA) 3.数据驱动 =&g ...

  8. 线性回归——Python代码实现

    import numpy as np def computer_error_for_give_point(w, b, points): # 计算出 观测值与计算值 之间的误差, 并累加,最后返回 平均 ...

  9. 前端跨域实现的几种方式？及使用Nginx反向代理配置。

    早期为了防止CSRF(跨域请求伪造)的攻击,浏览器引入了同源策略(SOP)来提高安全性.而所谓"同源策略",即同域名(domain或ip).同端口.同协议的才能互相获取资源,而不能 ...

  10. HTML常见问题

    一.外边距,margin: 垂直外边距的重叠:在网页中相邻的垂直方向的外边距会发生外边距的重叠 所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和. .box1{margin-bottom ...