拼了命学习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. python【第二十一篇】Django模板继承、分页、cookie验证

    1.模板继承 母版master.html {% block title %}{% endblock %}2 {% block table-cont %}{% endblock %} 子板 {% ext ...

  2. vs2012生成的项目,如何在只装有VS2010的电脑上打开

    步骤: 1.用记事本打开Vs2012生成的项目解决方案文件(.sln文件)文件 2.修改前两行 Microsoft Visual Studio Solution File, Format Versio ...

  3. Android Camera 预览图像被拉伸变形的解决方法【转】

    问题描述: 预览图像被拉伸变形 问题原因: 由于预览图像大小跟SurfaceView 大小不一致引起 解决方法: 获取系统支持的所有预览尺寸[getSupportedPictureSizes],然后再 ...

  4. U盘装系统出现错误 安装失败怎么办

    在用U盘装系统的时候,有些用户犹豫第一次操作,经常会遇到一些问题.例如U盘装系统失败;U盘容量已用完;内存损坏等种种问题.因此小编整理了一些关于U盘装系统失败的常见问题解答,希望对大家有帮助! 1. ...

  5. libSVM 参数选择

    libSVM 参数选择  [预测标签,准确率,决策值]=svmpredict(测试标签,测试数据,训练的模型);    原文参考:http://blog.csdn.net/carson2005/art ...

  6. windows远程桌面连接配置

    我的电脑 -> 属性 -> 远程 把两个checkbox勾上 运行(win + r) -> 输入secpol.msc回车 -> 找到本地策略 -> 安全选项 ->账 ...

  7. ANDROID_MARS学习笔记_S04_006_用获取access_token,access_token_secrect

    一.代码流程 1.MainActivity会开启PrepareRequestTokenActivity 2.PrepareRequestTokenActivity会根据配置文件的CONSUMER_KE ...

  8. 【Xamarin挖墙脚系列：移动设备应用的开发周期及准则】

    原文:[Xamarin挖墙脚系列:移动设备应用的开发周期及准则] 原文地址:https://developer.xamarin.com/guides/cross-platform/getting_st ...

  9. 行为树实现AI逻辑

    http://blog.csdn.net/kenkao/article/details/6099966 http://www.aisharing.com/archives/99 http://www. ...

  10. Cocos2d—X游戏开发之CCScrollView（滑动视图）（十二）

    CCScrollView在Cocos2d-X引擎中主要使用在图片尺寸远大于屏幕尺寸的时候使用. 总体来说,使用起来比较简单. 一个是CCScrollView控件本身,一个是CCScrollViewDe ...