网页中tab标签切换分别用jquery和javascript源码实现
//HTML布局
<ul id="tabTitle">
<li class="active">HTML5</li>
<li>PHP</li>
<li>Java</li>
</ul>
<div id="div1" style="display: block">
HTML5
</div>
<div id="div2">
PHP
</div>
<div id="div3">
Java
</div>
//css样式
<style type="text/css">
* {
margin:;
padding:;
} li {
list-style: none;
float: left;
padding: 5px 10px;
border: 1px solid #008000;
margin: 10px;
} div {
width: 150px;
height: 140px;
border: 1px solid black;
clear: both;
margin-left: 10px;
display: none;
} .active {
background: palegreen;
}
</style>
//javascript源码
<script type="text/javascript">
window.onload = function() {
var oUl = document.getElementById("tabTitle");
var aLi = oUl.getElementsByTagName('li');
var aDiv = document.getElementsByTagName('div'); for(var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onclick = function() {
for(var i = 0; i < aLi.length; i++) {
aLi[i].className = '';
aDiv[i].style.display = 'none';
}
this.className = 'active';
aDiv[this.index].style.display = 'block';
};
};
};
</script>
运行后如图:
以上就是使用javascript实现的切换页的方式喽...
接下来使用jquery实现同样的功能!!!
<ul id="tabTitle">
<li class="active">HTML5</li>
<li>PHP</li>
<li>Java</li>
</ul>
<div id="wrap">
<div id="div1" style="display: block">
HTML5
</div>
<div id="div2">
PHP
</div>
<div id="div3">
Java
</div>
</div>
<style type="text/css">
* {
margin:;
padding:;
} li {
list-style: none;
float: left;
padding: 5px 10px;
border: 1px solid #008000;
margin: 10px;
} #wrap div {
width: 150px;
height: 140px;
border: 1px solid black;
clear: both;
margin-left: 10px;
display: none;
} .active {
background: palegreen;
}
</style>
<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
$('ul li').click(function () {
//切换标签样式
$(this).addClass('active').siblings().removeClass('active');
//切换div显示隐藏
$('#wrap>div').eq($(this).index()).show().siblings().hide(); //也可以直接写成一句话,和上面两句分着写效果是一样的
$(this).addClass('active').siblings().removeClass('active').parent().next().children().eq($(this).index()).show().siblings().hide();
});
});
</script>
运行后的效果和上面是一样的。
注意:eq($(this).index()); 不要忘记这个index()方法哦~~
你也赶快运行起来吧~~~
作者原创,转载请注明出处!
网页中tab标签切换分别用jquery和javascript源码实现的更多相关文章
- vant中tab标签切换时会改变内容滚动高度
vant的tabs标签页,标签切换时会改变内容区的滚动高度,这是因为内容区共用同一个父元素为滚动区域引起的,解决办法:在tabs的内容区域嵌套一层滚动区域,让每个内容区域使用单独的滚动元素就行了. ...
- jQuery蓝色修边tab标签切换
jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...
- 很好用的Tab标签切换功能,延迟Tab切换。
一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...
- JS 实现 Tab标签切换功能
Tab标签切换 效果图: HTML部分: <div class="wrap"> <ul id="tag"> < ...
- Bootstrap——设置Tab标签切换
最近一个小项目需要用Tab标签切换显示不同div内容,用到了Bootstrap里面的东西,但是在Bootstrap3教程里却没有找到对应的代码,这里记录一下,方便以后快速查阅学习. 代码如下: < ...
- JS特效之Tab标签切换
在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...
- 网站开发,推荐使用SuperSlide 插件-Tab标签切换,图片滚动,无缝滚动,焦点图
SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...
- 每天一个JavaScript实例-tab标签切换
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Vue指令:v-for的用法;v-bind绑定class的几种写法;tab标签切换
一.v-for 的用法 循环指令,可以遍历 Number.String.Object.Array: 循环数字.字符串:有2个参数,分别是value和索引值: 循环对象:有3个参数,分别是 属性值.属性 ...
随机推荐
- SSIS Design1: 源数据提取
数据量的大小由两个方面决定:行的宽度和数据行的数量,为了减少ETL运行的时间,可以从源数据的提取上做优化,从数据源的输入上控制数据的质量和大小,减少转换和IO. 一,减少行的宽度 1,只加载需要的数据 ...
- DAC Usage3:Monitor Data-tier Applications
If you deploy a DAC to a managed instance of the Database Engine, information about the deployed DAC ...
- Sql Server系列:子查询
1 子查询概念 子查询是嵌套在另一个查询中的普通T-SQL查询.在有一个SELECT语句通过使用小括号创建子查询,作为另一个查询的部分数据或条件的基础. 子查询通常用于满足以下某个需求: ◊ 将一个查 ...
- WPF 后台读取样式文件
ResourceDictionary dic = new ResourceDictionary { Source = new Uri("Styles.xaml",UriKind.R ...
- FragmentPagerAdapter+ViewPager实现Tab切换效果
1.Activity 加载布局文件,获取Viewpager控件 给ViewPager填充适配器. import android.app.ActionBar; import android.app ...
- 最大连续子序列乘积(DP)
题目来源:小米手机2013年校园招聘笔试题 题目描述: 给定一个浮点数序列(可能有正数.0和负数),求出一个最大的连续子序列乘积. 输入: 输入可能包含多个测试样例.每个测试样例的第一行仅包含正整数 ...
- geotrellis使用(十六)使用缓冲区分析的方式解决投影变换中边缘数据值计算的问题
Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 问题探索 采样说明 实现方案 总结 一.前言 ...
- Difference Between HashMap and IdentityHashMap--转
原文地址:https://dzone.com/articles/difference-between-hashmap-and Most of the time I use HashMap whenev ...
- [C#]浅析ref、out参数
转载:http://www.cnblogs.com/vd630/p/4601919.html#top 按引用传递的参数算是C#与很多其他语言相比的一大特色,想要深入理解这一概念应该说不是一件容易的事, ...
- android 布局 使用 viewPager 时,如何解决 和 子页面 长按滑动 冲突问题
使用 viewPager 时,如何解决 和 子页面 长按滑动 冲突问题. 我的问题原型: 这个问题,我相信遇到的人会比较少,我是在 一个 viewPager 中,其中 一个 fragment 中实现了 ...