用Jquery实现选项卡功能

jQuery实现选项卡功能。首先将界面搭建好。有导航头tab_menu,还有内容tab_box。要实现的效果就是,点击后,将相应的内容显示出来,其他内容隐藏掉。同时为了展现选中状态,为选中的项添加背景,以示区别。

这一次,我自己写了代码,先看html部分:

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

html中,需要一个大的div,里面有两个子div,一个作为导航头tab_menu,一个作为内容体tab_box。css代码负责布局html内容。

css部分:

*{
margin:0;
padding:0;
}
.tab{
width:240px;
margin:50px;
/*border:1px solid;*/
}
.tab_menu{
clear:both;
}
.tab_menu li{
float:left;  //将导航头左飘
text-align:center;  //将文字居中
list-style:none;  //去除标记符号
background:#F1F1F1; //设置默认背景色
border:1px solid #898989; //设置边框色
margin-right:4px; //每个li之间的距离为4px
cursor:pointer;  //鼠标浮上之后,会有小手的标示出现
padding:1px 6px; //控制li的内部距离
border-bottom:none; 
}
.tab_menu li.hover{
background:#DFDFDF;
}
.tab_menu li.selected{//为选中的选项加背景与颜色
color:#FFF; 
background:#6D84B4;
}
.tab_box{
clear:both; //清楚float效果的影响
height:100px; //设置高度为100px
border:1px solid #898989; //设置内容体的边框样式
}
.hide{//隐藏需要隐藏的内容div
display:none;
}

待布局完成之后,进行jQuery的动作:

<script type='text/javascript'>
$(function(){
//1.点击时改变css属性,移除之前的selected选项,添加新的selected选项
//2.隐藏之前的div层,显示对应得div层
//为导航中的li注册点击事件
var $div_li = $(".tab_menu ul li");
$div_li.click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
//var index = $div_li.index(this);
//$("div.tab_box > div").eq(index).show().siblings().hide();
var text = $(this).text();
if(text=='时事')
{
$('.tab_box div:contains("时事")').removeClass('hide').siblings().addClass('hide');
}
if(text=='体育')
{
$('.tab_box div:contains("体育")').removeClass('hide').siblings().addClass('hide');
}
if(text=='娱乐')
{
$('.tab_box div:contains("娱乐")').removeClass('hide').siblings().addClass('hide');
}
}).hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});
});
</script>

这是我写的jQuery代码,我的思路是,点击选项卡时,添加selected样式,同时移除兄弟选项卡的selected样式。

再一个,如何才能触发相应的tab_box中的内容的隐藏与显示呢?

我发现了他们有相对应的内容,就是选项头为“实事”的对应的选项体也为“实事”,选项头为“体育”的对应的选项提也为“体育”等。

我就想,先获取选项头的内容,做出判断,当它为不同的值时,就触发不同的效果。效果是实现了,可是漏洞很明显,因为并不是所有的选项卡都是标题与内容体相对应。

再看看下面的代码:

<script type="text/javascript" >
//<![CDATA[
    $(function(){
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")       //选取子节点。不选取子节点的话,会引起错误。如果里面还有div 
.eq(index).show()   //显示 <li>元素对应的<div>元素
.siblings().hide(); //隐藏其它几个同辈的<div>元素
        })
})
//]]>
</script>

这里的处理就特别的巧妙,它通过获取li的索引,对选项体进行处理。它巧妙的利用了一个隐藏的对应关系,就是索引值。

这样即便选项头与选项体内容不对应,一样可以实现联动效果。

通过这次练习,我觉得,自己先动脑子想一想还是很好的。可以发现思路的差异,才能够发现不足,知道差距。有时候甚至你的思路会更好呢!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367553.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

帝国模板php代码,让帝国cms搜索页模板支持php代码

1.在/e/search/result/index.php头上加入require(../../class/functions.php);2.在/e/search/result/index.php 120行左右//替换公共模板变量$listtemp$tempr[temptext];这行代码之前加上$tempr[temptext]DtNewsBq(list.$tempr[tempid],$tempr[temptext],0);完整代码如下&#…

【刷题】BZOJ 4176 Lucas的数论

Description 去年的Lucas非常喜欢数论题&#xff0c;但是一年以后的Lucas却不那么喜欢了。 在整理以前的试题时&#xff0c;发现了这样一道题目“求Sigma(f(i)),其中1<i<N”&#xff0c;其中 表示i的约数个数。他现在长大了&#xff0c;题目也变难了。 求如下表达式的值&…

寻找缺少的堆栈跟踪

我们最近在博客中发表的一篇评论带回了有关特定体验的一些回忆。 我希望我没有经历过的那种经历。 在我们创建Plumbr之前很长时间&#xff0c;我正在调试一个应用程序&#xff0c;该应用程序每次在蓝月亮时都会给我一个例外。 详细程度令人震惊&#xff1a; java.lang.NullPoi…

HTML5--新增拖放事件(7)

前言&#xff1a; 这节课主要学习HTML5中新增的拖放事件(drag/drop)。 拖放事件 1.启用&#xff1a;HTML5中&#xff0c;如果想拖拽元素&#xff0c;给元素添加draggable true的属性&#xff0c;图像和a标签默认是可以进行拖拽的。 2.拖拽事件&#xff1a; 1.应用于被拖拽元素…

Django 用 uploadify 实现图片批量上传

分享一下在Django中使用uploadify——一个jQuery批量上传插件——的方法。github上的django-uploadify使用的是2.1.4版本&#xff0c;上传button只能使用图片&#xff0c;不能很方便的修改样式。本文针对的是uploadify 3.0.0版本。uploadify可以结合Django自身的ImageField&…

php判断记录,PHP判断数据库中的记录是否存在的方法,php数据库_PHP教程

PHP判断数据库中的记录是否存在的方法&#xff0c;php数据库本文实例讲述了PHP判断数据库中的记录是否存在的方法。分享给大家供大家参考。具体实现代码如下&#xff1a;复制代码 代码如下:$sql"select * from checklist where game_id$gid and task$task and status$stat…

Java DB中的Java存储过程

1 Java存储过程 这篇文章是关于Java DB中的Java存储过程的。 Java DB是基于Java编程语言和SQL的关系数据库管理系统。 这是Apache软件基金会的开源Derby项目的Oracle版本。 Java SE 7 SDK中包含Java DB。 在数据库内调用的Java代码是一个存储过程&#xff08;或多个过程&…

一些职场感想

教训 不要相信领导给你画的大饼 离开了&#xff0c;就不要回去 他说的为你好&#xff0c;都是套路而已 你会比你想象的更优秀 不要认为提增加工资不好意思&#xff0c;你不提&#xff0c;他永远不会给你加工资 怎么才算努力 这就看你所处的队友是怎么样的&#xff1b;如果队友是…

php聊天室发送表情,聊天室技术(六)-- 表情和动作_PHP

表情和动作极大的丰富了聊天的乐趣,一般的聊天室主要通过2种方法发送(1) 按钮菜单的方法通过在一个固定的下拉菜单里面进行选择,找到自己满意的表情,然后选中,按发送按钮发出(2) 通过手工输入代号比如网易的以手工输入 //hello 代表欢迎的一段动作,以 //bye 代表再见的一段动作…

Java 8的新增功能(第I部分-JavaFX)

免责声明&#xff1a;我不为Oracle工作&#xff0c;也不以任何方式代表Oracle。 此功能列表不是官方的。 作为“局外人”&#xff0c;这只是我研究的一部分。 Java 8已在大约两个月前完成功能&#xff0c;并且开发者预览版即将来临&#xff08;两周后&#xff09;。 这篇博客文…

mysql数据库sql语句优化

昨天帮同事优化了一个sql语句发出来共勉下: SELECT T.*, ( SELECT S.codeName FROM sys_codelist S WHERE S.codeValue T.packagingtype AND S.kindCode PACKAGING ) AS packagingtypeName, S.codeName AS codename, ( SELECT picpath FROM zl_b_gd_pic WHERE 1 1 AND gdid …

CopyPropertis

commons-beanutils.jar PropertyUtils.copyProperties(Object dest, Object orig) spring-beans.jar BeanUtils.copyProperties(Object source, Object target)CopyPropertis对List的操作需要手动转载于:https://www.cnblogs.com/xingzc/p/8663119.html

java调用外联服务用xml,Spring IOC 依赖注入的两种方式:XML和注解

IoC&#xff0c;直观地讲&#xff0c;就是容器控制程序之间的关系&#xff0c;而非传统实现中&#xff0c;由程序代码直接操控。这也就是所谓“控制反转”的概念所在。控制权由应用代码中转到了外部容器&#xff0c;控制权的转移是所谓反转。IoC还有另外一个名字——“依赖注入…

Wicket模型的干净方法

Apache Wicket Web框架的核心概念之一是模型和IModel作为其编程接口。 Wicket组件严重依赖模型&#xff0c;这使它们成为体系结构的重要组成部分。 Apache Wicket是一个有状态框架&#xff0c;将页面及其组件存储到通常位于HTTP会话中的页面存储中。 组件根据模型的内容创建面向…

jquery选择器大全

jQuery 选择器大全选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id"lastname" 的元素 .class $(".intro") 所有 class"intro" 的元素 element $("p") 所有 <p> 元素 .class.class $(".intr…

第7章 输入/输出系统

总览 I/O系统基本概念 外部设备 输入设备&#xff1a;键盘、鼠标 输出设备&#xff1a;显示器、打印机 外存储器&#xff1a;硬盘存储器、磁盘阵列、光盘存储器 I/O接口 I/O接口的功能和基本结构 I/O端口及其编址 I/O方式 程序查询方式 程序中断方式 中断的基本概念&#xff0c…

python第一个程序HelloWorld

在写第一个python程序之前&#xff0c;我们还需要了解的一个东西就是python解释器 解释器&#xff0c;顾名思义&#xff0c;就是解释一段代码的机器&#xff0c;程序运行的平台&#xff0c;例如Java的解释器就是jdk。 我们在写好的python代码&#xff0c;需要在解释器上执行&am…

Java字符串的十大问题

以下是有关Java字符串的十大常见问题 。 1.如何比较字符串&#xff1f; 使用“ ”还是使用equals&#xff08;&#xff09;&#xff1f; 简而言之&#xff0c;“ ”测试引用是否相等&#xff0c;而equals&#xff08;&#xff09;测试值是否相等。 除非您要检查两个字符串是否…

php原生sql语法,thinkphp执行原生SQL语句的实现方法

怎样在thinkphp里面执行原生的sql语句&#xff1f;$Model new Model();//或者 $Model D(); 或者 $Model M();$sql "select * from order";$voList $Model->query($sql);只是需要new一个空的模型继承Model中的方法。注意query是查功能&#xff0c;execute是增…

Jquery中如何获取元素的文本,值,属性和内容

jQuery DOM 操作jQuery 中非常重要的部分&#xff0c;就是操作 DOM 的能力。jQuery 提供一系列与 DOM 相关的方法&#xff0c;这使访问和操作元素和属性变得很容易。提示&#xff1a;DOM Document Object Model&#xff08;文档对象模型&#xff09;DOM 定义访问 HTML 和 XML …