文档章节

jq+ Js实现选项卡

jenn吖
 jenn吖
发布于 2016/05/16 09:30
字数 272
阅读 6
收藏 0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jq实现选项卡切换</title>
<script src="js/jquery.js" type="text/javascript"></script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background-color: #fff;
        font-family: "微软雅黑";
        font-size: 18px;
        width: 1000px;
        margin: 50px auto;
        color:#000000;
    }
    .wrapper{
        width: 350px;
    }
    #nav ul{
        border-bottom: 2px solid  yellowgreen;
        height: 32px;
    }
    #nav li{
        display: inline-block;
        border: 2px solid #999;
        border-bottom: none;
        margin-left: 10px;
        width: 65px;
        text-align: center;
        line-height: 30px;
    }
    #nav li:hover{
        cursor: pointer;
    }
    #content{
        display: block;
        border: 1px solid  blue;
        border-top: none;
        text-align: center;
        height: 100px;
        line-height: 100px;
    }
    #nav li.on{
        border-bottom: solid 2px #ffffff;
    }
    .hide{
        display: none;
    }
    .show{
        display: block;
    }
</style>
</head>
<script type="text/javascript">
    /*window.onload=change;  //js代码实现
    function change(){
    this.nav=document.getElementById("nav");
    this.li=nav.getElementsByTagName("li");
    this.cont=document.getElementById("content");
    this.divi=cont.getElementsByTagName("div");
    for(var i=0;i<li.length;i++){
        li[i].index=i;
        li[i].onclick=function(){
            for(var i=0;i<li.length;i++){
            li[i].className="";
            divi[i].className="hide";
            }
        li[this.index].className="on";
        divi[this.index].className="show";
        }
    }
}*/
$(function(){
$('#nav li').each(function(){
    $(this).click(function(){
        $('#nav li').removeClass("on");
        $(this).addClass("on");
        $("#content div").removeClass();
        $("#content div").eq($(this).index()).addClass("show").siblings().addClass("hide");
})
})
})
</script>
<body>
    <div class="wrapper">
        <div id="nav">
            <ul>
                <li class="on">num1</li>
                <li>num2</li>
                <li>num3</li>
                <li>num4</li>
            </ul>
        </div><div id="content">
            <div class="show">content1</div>
            <div class="hide">content2</div>
            <div class="hide">content3</div>
            <div class="hide">content4</div>
        </div>
    </div>
</body>
</html>

 

© 著作权归作者所有

jenn吖
粉丝 7
博文 17
码字总数 12761
作品 0
崇明
私信 提问
如何在没有 jQuery 的情况下使用 Bootstrap 组件

你使用 Bootstrap 的 JavaScript 组件吗? 你喜欢 Vanilla JavaScript 吗? 如果答案是肯定的,那么你应该会对 Native JavaScript for Bootstrap 项目感兴趣,这个项目的目标是消除组件对 jQue...

oschina
2016/12/02
2.1K
1
[原创]tab滑动面板效果初探

从接触jquery到现在,几乎没怎么去运用,之前一直习惯写js代码,今天想试着用jq实现一些常用的UI功能,滑动面板切换效果 先看效果图,样式比较简单:点击下载【原创】tab切换面板.zip 实例一...

长平狐
2012/08/30
863
2
JS三教九流系列-require.js-网站模块化开发

js开发的模块化就是module处理 简单理解js模块化的开发就是让我们的web项目对js进行分类的处理 我们在开发网站的时候,里面会用要很多的类库,如jquery,还会有到基于jq各种插件,还会有其他...

透笔度
2015/08/19
124
0
JS杂谈系列-js的认识和js相关技术的了解

其实这篇博客应该是在讲js之前写的,现在算是补上的内容吧,我写的都是自己了解的,可不是凭空捏造,当然很多会记不清,错了及时提出啊!我写的时候也是写有用的,不会写一点子扯淡的玩意,像...

透笔度
2015/08/16
187
0
电视机顶盒web开发总结,避免踩坑

1.电视机顶盒web开发总结 针对东方有线机顶盒UUTVOS操作系统中内置的联彤浏览器web开发,总结一些自己在开发中遇到的问题和技巧。浏览器是基于Firefox的阉割版,所以开发中有一些莫名其妙的坑...

漫步人生路君
2018/06/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

安全组和云防火墙的区别

前言 熟悉云平台的朋友可能都会注意到这样一个事情:无论公有云还是私有云,创建虚拟机的时候都需要选择安全组,来对虚拟机进行安全防护;有的云平台在VPC里,还能选择防火墙,ZStack在3.6版...

ZStack社区版
17分钟前
1
0
教育性app开发的重要性和好处

在这个精通技术的世界中,流行的app主导着无聊的教育系统。当我们将技术和教育结合在一起时,它将带来当代以及强大的学习资源。因此,将教育移动app集成到您的学习过程中,并根据自己的信念把...

a429011717
18分钟前
2
0
IE6/7/8如何兼容CSS3属性

本文转载于:专业的前端网站➩IE6/7/8如何兼容CSS3属性 最近在工作中总是要求IE8兼容CSS3属性,在网上搜了搜主要是引入了一个htc文件(ie-css3.htc或者PIE.htc。个人认为这两个文件的作用差不...

前端老手
33分钟前
2
0
手把手教你ALLEGRO的约束规则的设置教程!

约束规则的设置 分三步, 定义规则(一、基本约束规则设置:1、线间距设置;2、线宽设置;3、设置过孔;4、区域约束规则设置;5、设置阻抗;6、设置走线的长度范围;7、设置等长:7.1、不过电阻的NET 等...

demyar
35分钟前
3
0
完美解决H5滚动滑动穿透方案:不使用系统滚动

网上有很多黑科技解决这个问题,都不是从根本去解决,例如通过js控制弹出时html加上position:fixed; 弹窗关闭后再去掉该样式,总觉得不太对,像是打补丁。 今天终于找到了滚动穿透的原因和完...

未来cc
40分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部