拼了命学习js,想把学到的Javascript效果,可以记在博客里,在记录过程中,加深理解。

gogogo,第一个效果,选项卡。

一、选项卡效果的实现思路

选项卡效果的应用很广泛,几乎所有的网站都会用到选项卡,现在就来写选项卡。

选项卡的实现思路:

两个div,一个用来放在选项卡,一个用来放置每个选项卡内容。

首先,先把放置内容的div隐藏起来display:none,只保留一个显示display:block。

然后,通过点击选项卡,在该添加类的位置上添上属性类。

二、实现

我写的这个选项卡界面特“简洁”,只有说明选项卡该如何写。start~~~

截图:

function setTab(name,carsel,n)            //name为名字,carsel为游标,n为tab的数量
{
for(var i =1;i<=n;i++)
{
var oMenu = document.getElementById('one'+i);
var oContent = document.getElementById('con_'+name+i);
oMenu.className = i == carsel?"hover":"";
oContent.style.display = i ==carsel?"block":"none";
}
}
<div id="tab_menu">
<ul>
<li id="one1" onclick="setTab('one',1,3)">女装</li>
<li id="one2" onclick="setTab('one',2,3)">男装</li>
<li id="one3" onclick="setTab('one',3,3)">童装</li>
</ul>
</div>
<div id="tab_content">
<div id="con_one1">女装女装女装女装女装</div>
<div id="con_one2" style="display:none">男装男装男装男装男装</div>
<div id="con_one3" style="display:none">童装童装童装童装童装</div>
</div>

上面的Javascript函数,通过一个for循环,来判断用户点击的是哪一个选项卡,然后便获取该选项卡元素。这里的处理是:document.getElementById('one'+i);

获取到的会是id = one1/one2/on3,然后判断,i == carsel?"hover":"";   此时循环的 i   是否会等于游标值,会的话就添加一个hover类上去,改变被点击项的样式。

同样,下面的语句:oContent.style.display = i ==carsel?"block":"none";给当前被点击的选项,设置display为block,即显示出来。

三、完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<link href="" rel="stylesheet">
<style type="text/css">
.tab
{
width: 600px;
height: 400px;
background: #CCC;
margin: 0 auto;
}
#tab_menu
{
width: 200px;
height: 400px;
float: left;
background: #efefef;
}
#tab_content
{
width: 400px;
height: 400px;
float: left;
}
#con_one1
{
background: yellow;
width: 400px;
height: 400px;
} #con_one2
{
background: green;
width: 400px;
height: 400px;
}
#con_one3
{
background: blue;
width: 400px;
height: 400px;
}
.hover
{
background: yellow;
}
</style>
<script type="text/javascript">
function setTab(name,carsel,n) //carsel为游标,n为tab的数量
{
for(var i =1;i<=n;i++)
{
var oMenu = document.getElementById('one'+i);
var oContent = document.getElementById('con_'+name+i);
oMenu.className = i == carsel?"hover":"";
oContent.style.display = i ==carsel?"block":"none";
}
}
</script>
</head>
<body>
<div class="tab">
<div id="tab_menu">
<ul>
<li id="one1" onclick="setTab('one',1,3)">女装</li>
<li id="one2" onclick="setTab('one',2,3)">男装</li>
<li id="one3" onclick="setTab('one',3,3)">童装</li>
</ul>
</div>
<div id="tab_content">
<div id="con_one1">女装女装女装女装女装</div>
<div id="con_one2" style="display:none">男装男装男装男装男装</div>
<div id="con_one3" style="display:none">童装童装童装童装童装</div>
</div>
</div>
</body>
</html>

四、

补充:

用一个参数来实现

/*------------------一个参数实现--------------------*/
function setTab(n)
{
var aLi = document.getElementsByTagName('li');
var oContent = document.getElementById('tab_content');
var aDiv = oContent.getElementsByTagName('div');
var i =0;
for(i = 0;i<aLi.length; i++)
{
if(n == i)
{
aLi[i].className = "hover";
aDiv[i].style.display = "block";
}
else
{
aLi[i].className = "";
aDiv[i].style.display = "none";
}
}
} <div id="tab_menu">
            <ul>
                <!--<li id="one1" onclick="setTab('one',1,3)">女装</li>
                <li id="one2" onclick="setTab('one',2,3)">男装</li>
                <li id="one3" onclick="setTab('one',3,3)">童装</li>-->
                <li id="one1" onclick="setTab(0)" class="hover">女装</li>
                <li id="one2" onclick="setTab(1)">男装</li>
                <li id="one3" onclick="setTab(2)">童装</li>
                
            </ul>
        </div>

JavaScript效果之选项卡的更多相关文章

  1. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  2. 7、JavaScript总结——实现选项卡切换的效果

    编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居    200万内购五环三居 140万安家东三环 ...

  3. javascript与jQuery选项卡效果

    HTML结构: <!doctype html><html><head><meta charset="utf-8"><title ...

  4. Javascript学习笔记2.2 Javascript与DOM选项卡(滑动门)案例详解

    学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...

  5. javascript效果:手风琴、轮播图、图片滑动

    最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 手风琴: 纯css: <!DOCTYPE html> <html lang="en"> < ...

  6. 常用js效果:选项卡切换

    js选项卡,很多网站都会用到,我这里用jquery给整了一个简单但是却很实用的js选项卡,废话不多说,直接上代码: <style> .txtadsblk01{ width:200px;} ...

  7. 闲扯 Javascript 01 实现选项卡

    javascript 实现选项卡 今天下午的两节课,在机房闲来没事 ,就学习了javascript 怎么获取HTML的标签,改变CSS样式,资料来源 智能社! <script> windo ...

  8. javascript简单的选项卡

    实现一个简单的选项卡功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  9. 用JavaScript实现的选项卡

    Codes wins arguments! <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

随机推荐

  1. sqoop将关系型数据库的表导入hive中

    1.sqoop 将关系型数据库的数据导入hive的参数说明:

  2. docker & nodejs & mongodb

    Nodejs 应用简单的访问Mongodb 部署至Docker 1.本地简单的写能运行起来的一个nodejs (demo可写的更简单 一个post一个get即可) schemas  user.js v ...

  3. 【Stage3D学习笔记续】真正的3D世界(六):空间大战

    这就是书上的最终效果了,一个完整的空间大战游戏: 点击查看源码 这里并没有太多的新知识,所涉及的东西更多的是游戏开发方面的优化和技巧,下面我们大家一起来看看: 飞船: 类似粒子效果中的粒子创建方法,我 ...

  4. 解决vue.js修改数据无法触发视图

    data:{checkValue:{}}that.checkValue[key] = [] 赋值无法实时改变变量:(数据其实最终被修改,但是并没有触发检测从而更新视图)原因:Vue 不能检测到对象属性 ...

  5. 使用vw做移动端页面的适配

    Flexible到今天也有几年的历史了,解救了很多同学针对于H5页面布局的适配问题.而这套方案也相对而言是一个较为成熟的方案.简单的回忆一下,当初为了能让页面更好的适配各种不同的终端,通过Hack手段 ...

  6. C/C++程序CPU问题分析

    转载地址:http://www.10tiao.com/html/473/201606/2651473094/1.html   程序的CPU问题是另外一类典型的程序性能问题,很多开发人员都受到过程序CP ...

  7. C++ vector 容器

    //vector类 resemble array 自动扩容... 暂存于内存中 //格式 vector<类(型)名> 对象名 example: vector<string> v ...

  8. 【CXF】- 拦截器 Interceptor

    CXF拦截器 拦截动态操作请求和响应数据 拦截器分类 位置:服务器端拦截器,客户端拦截器 消息方向:入拦截器 出拦截器 定义者:系统拦截器 自定义拦截器:LoggingInInteceptor ①:创 ...

  9. APScheduler定时任务

    python模块(APScheduler定时任务)   APScheduler简介 在平常的工作中几乎有一半的功能模块都需要定时任务来推动,例如项目中有一个定时统计程序,定时爬出网站的URL程序,定时 ...

  10. Thinkphp学习笔记6-redirect 页面重定向

    ThinkPHP redirect 方法可以实现页面的重定向(跳转)功能.redirect 方法语法如下: $this->redirect(string url, array params, i ...