//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源码实现的更多相关文章

  1. vant中tab标签切换时会改变内容滚动高度

    vant的tabs标签页,标签切换时会改变内容区的滚动高度,这是因为内容区共用同一个父元素为滚动区域引起的,解决办法:在tabs的内容区域嵌套一层滚动区域,让每个内容区域使用单独的滚动元素就行了.   ...

  2. jQuery蓝色修边tab标签切换

    jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...

  3. 很好用的Tab标签切换功能,延迟Tab切换。

    一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...

  4. JS 实现 Tab标签切换功能

    Tab标签切换 效果图: HTML部分: <div class="wrap">     <ul id="tag">       < ...

  5. Bootstrap——设置Tab标签切换

    最近一个小项目需要用Tab标签切换显示不同div内容,用到了Bootstrap里面的东西,但是在Bootstrap3教程里却没有找到对应的代码,这里记录一下,方便以后快速查阅学习. 代码如下: < ...

  6. JS特效之Tab标签切换

    在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...

  7. 网站开发,推荐使用SuperSlide 插件-Tab标签切换,图片滚动,无缝滚动,焦点图

    SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...

  8. 每天一个JavaScript实例-tab标签切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. Vue指令:v-for的用法;v-bind绑定class的几种写法;tab标签切换

    一.v-for 的用法 循环指令,可以遍历 Number.String.Object.Array: 循环数字.字符串:有2个参数,分别是value和索引值: 循环对象:有3个参数,分别是 属性值.属性 ...

随机推荐

  1. SSIS Design1: 源数据提取

    数据量的大小由两个方面决定:行的宽度和数据行的数量,为了减少ETL运行的时间,可以从源数据的提取上做优化,从数据源的输入上控制数据的质量和大小,减少转换和IO. 一,减少行的宽度 1,只加载需要的数据 ...

  2. DAC Usage3:Monitor Data-tier Applications

    If you deploy a DAC to a managed instance of the Database Engine, information about the deployed DAC ...

  3. Sql Server系列:子查询

    1 子查询概念 子查询是嵌套在另一个查询中的普通T-SQL查询.在有一个SELECT语句通过使用小括号创建子查询,作为另一个查询的部分数据或条件的基础. 子查询通常用于满足以下某个需求: ◊ 将一个查 ...

  4. WPF 后台读取样式文件

    ResourceDictionary dic = new ResourceDictionary { Source = new Uri("Styles.xaml",UriKind.R ...

  5. FragmentPagerAdapter+ViewPager实现Tab切换效果

    1.Activity  加载布局文件,获取Viewpager控件   给ViewPager填充适配器. import android.app.ActionBar; import android.app ...

  6. 最大连续子序列乘积(DP)

    题目来源:小米手机2013年校园招聘笔试题 题目描述: 给定一个浮点数序列(可能有正数.0和负数),求出一个最大的连续子序列乘积. 输入: 输入可能包含多个测试样例.每个测试样例的第一行仅包含正整数 ...

  7. geotrellis使用(十六)使用缓冲区分析的方式解决投影变换中边缘数据值计算的问题

    Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 问题探索 采样说明 实现方案 总结 一.前言     ...

  8. Difference Between HashMap and IdentityHashMap--转

    原文地址:https://dzone.com/articles/difference-between-hashmap-and Most of the time I use HashMap whenev ...

  9. [C#]浅析ref、out参数

    转载:http://www.cnblogs.com/vd630/p/4601919.html#top 按引用传递的参数算是C#与很多其他语言相比的一大特色,想要深入理解这一概念应该说不是一件容易的事, ...

  10. android 布局 使用 viewPager 时,如何解决 和 子页面 长按滑动 冲突问题

    使用 viewPager 时,如何解决 和 子页面 长按滑动 冲突问题. 我的问题原型: 这个问题,我相信遇到的人会比较少,我是在 一个 viewPager 中,其中 一个 fragment 中实现了 ...