js实现简单的滑动门和tab选项卡

思想:首先定义三个选项卡,可以用任何标签,只要如下图,

一共有三个ul,第一个ul给一个class,因为默认第一个选项卡的内容显示出来,

其他两个ul  display:none;

当我鼠标移到第二个第三个选项卡的时候,删除第一个选项卡的class,鼠标移到哪里就给哪个选项卡那个class

思路就這样

下面是完全的代码

最好自己写写,然后参考自己下面的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style type="text/css">
    *{margin:0;padding:0;}
    body{font-size:12px;}
    #content{margin:0 auto;width:600px;border:1px #000 solid;}
    #tabs{height:30px;background:black;overflow:hidden;position:relative;}
    #tabs #state{
        display:block;
        top:0;right:0;
        width:30px;height:30px;
        font-size:24px;
        font-weight:700;
        text-align:center;
        color:#fff;
        cursor:pointer;
        position:absolute;
    }
    #tabs li{
        display:inline;   /**/
        padding:0 8px;
        line-height:30px;
        color:#fff;
        list-style:none;
        cursor:pointer;
        float:left;

        }
        #tabs .active{color:#000;background:#fff;}

       #list {padding:10px 0;}
        #list ul{margin:0 25px;display:none;}
        #list ul li{height:25px;line-height:25px;}
        #list .active{display:block;}
</style>
</head>
<body>

<script>
window.onload=function()
{
   var $ =function(ids)
      {
          return document.getElementById(ids);
      }
      var tabs= $("tabs").getElementsByTagName("li");
      var state = $("state");
      var list = $("list");
      var ul = list.getElementsByTagName("ul");

   for(var i=0;i<tabs.length;i++)
   {
        tabs[i].index=i;
        tabs[i].onmouseover=function()
        {
            for(var i=0;i<tabs.length;i++)
            {
                tabs[i].className=ul[i].className=‘‘;
            }
            this.className=ul[this.index].className="active";
        }
   }

      //方法2
      // for(var i=0;i<tabs.length;i++)
      // {
      //   (
      //      function(index)
      //     {
      //         tabs[index].onmouseover=function()
      //       {
      //           for(var j=0;j<tabs.length;j++)
      //           {
      //               tabs[j].className=ul[j].className=‘‘;
      //           }
      //            this.className=ul[index].className="active";
      //       }
      //     }
      //   )(i)  ;
      // }

      //方法1
     // function clearEvent(index)
     //  {
     //      tabs[index].onmouseover=function()
     //    {
     //        for(var j=0;j<tabs.length;j++)
     //        {
     //            tabs[j].className=ul[j].className=‘‘;
     //        }
     //         this.className=ul[index].className="active";
     //    }
     //  }

       //加号位置的收缩
      state.onclick = function()
      {
        var text = this.innerHTML;
        if( text == "+")
        {
            this.innerHTML="-";
            list.style.display="block";
        }
        else
        {
            this.innerHTML="+";
            list.style.display="none";
        }
      }

}

</script>

<div id="content">
    <div id="tabs">
        <ul>
            <li class="active">暴给力</li>
            <li>职业指导</li>
            <li>充电区</li>
        </ul>
        <span id="state">-</span>
    </div>
    <div id="list">
        <ul class="active">

            <li>IE6 PNG 解决方案合集</li>
            <li>firefox下输入框innerHtml问题</li>
            <li>精品菜单导航,多年精心收集整理上上品菜单</li>
            <li>60个WEB使用效果集合</li>
            <li>CSS3动态按钮导航集锦</li>
            <li>Html 5 的革新,结构之美</li>
            <li>javascript高级程序设计</li>
            <li>w3cfuns我爱你</li>
            <li>高性能网站建设指南</li>
            <li>罕见的皮具拉链效果博客</li>
            <li>基础5块状元素的内联元素</li>
            <li>羊癫疯的纯css下拉导航原理</li>
            <li>请问這个排序功能如何实现?</li>
            <li>分享10个便利的html5/css3框架</li>
            <li>白鹭ersonal申请热血活动板块版主</li>
            <li>web前端标准在哥哥浏览器中的差异</li>
        </ul>
        <ul>
            <li>腾讯面试题</li>
            <li>近期面试感受</li>
            <li>腾讯实习生web前端js开发工程师面试经历</li>
            <li>阿里巴巴web前端开发面试题</li>
            <li>网易页面重构面试题</li>
            <li>网易web前端开发师面试回答的经历</li>
            <li>2001腾讯前端面试稿</li>
            <li>alibaba web前段开发工程师面试奇遇记</li>
            <li>特训实习生网页重构组招聘公开试题</li>
            <li>求职记--记录成为面霸的全过程</li>
            <li>淘宝web前端开发面试经历</li>
            <li>百度前端面试题对话记录</li>
            <li>2011年最新百度前端开发面试经历</li>
            <li>去tx的事基本黄了,题我发出来</li>
            <li>俺们公司的面试题</li>
        </ul>
        <ul>
            <li>厘米IT学院第89期</li>
            <li>厘米IT学院第88期</li>
            <li>厘米IT学院第87期</li>
            <li>厘米IT学院第86期</li>
            <li>厘米IT学院第85期</li>
            <li>厘米IT学院第84期</li>
            <li>厘米IT学院第83期</li>
        </ul>
    </div>
</div>

</body>
</html>
时间: 2024-10-01 20:53:37

js实现简单的滑动门和tab选项卡的相关文章

js实现多个滑动门在同一个页面展示效果

多个滑动门在同一个页面展示,在工作小组里面,一直是一个让人比较纠结的问题~学习库里面有一个技术同事5年前给封装的控件,大家就一直在用复用那个. 最近项目里面用到的这个效果非常多,每次都要调用那个js控件,还得按规则匹配相应的id,真心觉得麻烦,就在想,为嘛不自己写一个可以通用的~ 于是,就有了下面这个脚本效果: js: <script type="text/javascript" > var arrayObj = [' ',' ',' ',' ',' ',' ',' '];

CSS如何实现滑动门效果

CSS如何实现滑动门效果:所谓的滑动门和tab选项卡其实是一个意思,下面就通过实例介绍一下如何实现此功能,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <meta name="key

【回忆1314】回忆之横竖滑动门

直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title> 横竖滑动门 </title> <link rel="stylesheet" href="sliding-door.css"/> </head> <body&g

一款CSS+JS+DIV制作的蓝色风格tab滑动门

<!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> <title>一款CSS+JS+DIV制作的蓝色风格ta

jquery插件之tab标签页或滑动门

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过事件,您也可以根据自己的实际需求将滑过事件hover改为点击事件click.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

JS滑动门

<a href="#" id="one1" onmouseover="setTab('one',1,2)" class="hover">专家汇聚</a> <a href="#" id="one2" onmouseover="setTab('one',2,2)" >主治医师</a> <div id="con

javascript滑动门的实现方法和案例

首先我们知道js滑动门的三种实现思路: -自定义方法 -闭包 -自定义属性 那么写个列子分析一下各自的好坏.demo地址:http://codepen.io/tianzi77/pen/jPMPeB html结构: <div id="content"> <div id="tabs"> <ul> <li class="active">天子</li> <li>滑动门</li&

有关“滑动门”代码研究

废话先不说,先上代码: /**************************************** 此代码来源于CSS-TRICKS,以下信息为博主发布: CREATED BY: Brandon Setter WEBSITE: http://Media-Sprout.com FOLLOW ME: twitter.com/bsetter CREATION DATE: 10/2009 VERSION 1.0 *****************************************/

电商网站滑动门特效

今天在慕课网学习了JavaScript滑动门特效,这个特效在电商网站上比较常见,难度适中,要对JavaScript和DOM比较熟悉. 一.实现HTML + CSS结构 首先编写HTML代码 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>sliding doors</title> 6 <link rel="s