运用js写的一个小例子，实现点击不同的标签出现不同的内容：

 <!DOCTYPE html>

 <html>

 <head>

     <meta chaset="utf-8">

 <script>

 function nav(obj, x)

 {

     var a = obj.parentNode.parentNode.children;

     for(var i =0;i<a.length;i++) {

       a[i].style="border:1px solid red";

     }

 obj.parentNode.style="border-bottom:white;";

     var div = document.getElementsByName("Div");

     for(var i =0;i<div.length;i++) {

         div[i].style.display="none";

          div[x].style.display="";

     }

 }

 </script>

     <style>

         ul{list-style:none;}

         ul li{border: 1px solid red;float:left;padding:10px }

         .li{padding:0;width:200px;margin-top:42px}

         .active{

         border-bottom:white;

         }

         a{text-decoration:none;}

         div{padding:100px}

         div h1{text-align:center;}

     </style>

 </head>

 <body>

     <ul>

         <li class="li"></li>

         <li class="active"><a href="#" onclick="nav(this, 0)">导航1</a></li>

         <li><a href="#" onclick="nav(this, 1)">导航2</a></li>

         <li><a href="#" onclick="nav(this, 2)">导航3</a></li>

         <li class="li"></li>

     </ul>

     <div id="div1" name="Div"><h1>内容1</h1></div>

     <div id="div2" name="Div" style="display:none"><h1>内容2</h1></div>

     <div id="div3" name="Div" style="display:none"><h1>内容3</h1></div>

 </body>

 </html>

js小例子（标签页）的更多相关文章

  1. js基础--浏览器标签页隐藏或显示状态 visibility详解

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...

  2. 整理用js实现tab标签页

    首先是css样式,比如这样的: <style> *{ ; ; list-style: none; font-size: 12px; } .notice{ width: 298px; hei ...

  3. js小例子（简单模糊匹配输入信息）

    该例子实现的是用户输入信息或者字母时可以搜索出来,鼠标点击选择 <!DOCTYPE html> <html> <style> p{ width:200px; hei ...

  4. AJAX 请求后使用 JS 打开新标签页被阻止的解决方法

    需求:发起一个 AJAX 请求,根据请求结果来打开一个新页面. 问题:AJAX 请求后,使用 window.open() 方法来打开新页面会被浏览器阻止. 解决方法:在 AJAX 请求之前,就使用 c ...

  5. js实现多标签页效果

    点击导航按钮切换div的内容 html代码: <div class="tabs"> <ul id="tab"> <li>&l ...

  6. js小例子之二级联动

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

  7. 微信小程序标签页切换

    WXML中: <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab== ...

  8. js小例子（多字溢出，省略号表示）

    实现了div中字数较多,显示不下的时候,用省略号来表示,并且可以展开和收起: <html> <head> <meta http-equiv="Content-T ...

  9. js封装tab标签页

    <html> <head> <title></title> <meta charset="UTF-8"> <sty ...

随机推荐

  1. Quartz结合SPRING多任务定时调用

    定义两个被调度的类 public class QuartzJob { public void work() { System.out.println(Spring Quartz的任务调度1被调用!&q ...

  2. 解决Windows10下80端口被PID为4的System占用的问题

    一.背景 最近由于好奇心,更新了windows10系统,感觉上手还蛮快,而且体验还不错,但是在IDEA中做开发时,使用80端口进行启动项目的时候发现端口被占用了,于是尝试解决这个问题.具体步骤如下,分 ...

  3. ld returned 1 exit status"的解决办法

    在Linux下创建线程时,编译时会出现下面的错误,[root@linuxserver 807]# gcc -o 22 22.c/tmp/cc21HcoW.o(.text+0x4c): In funct ...

  4. C/C++中调用python文件

    1.将python27安装目录下include.libs文件夹拷贝至Demo程序目录. 2.Demo项目设置包含Python.h.python27.lib); (因为安装python27的时候,pyt ...

  5. NYOJ题目1082买新书了

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsoAAAI5CAIAAAA38ougAAAgAElEQVR4nO3dPVLjStsG4G8T5CyE2A

  6. 攻城狮在路上（叁）Linux（十一）--- 用户与用户组、文件权限、目录配置

    一.用户与用户组: 3个概念:文件所有者(user).用户组(group).其他人(others). /etc/passwd  <==存放所有的用户名 /etc/shadow  <==存放 ...

  7. oracle sql rank dense_rank row_number fisrt last

    測試表emp

  8. Oracle 【IT实验室】数据库备份与恢复之一：exp/imp(导出与导入&装库与卸库)

    1.1  基本命令 1.  获取帮助 $ exp help=y $ imp help=y     2.  三种工作方式 (1)交互式方式 $ exp        //  然后按提示输入所需要的参数 ...

  9. WPF ItemsControl ListBox ListView比较

    在进行列表信息展示时,WPF中提供多种列表可供选择.这篇博客将对WPF ItemsControl, ListBox, ListView进行比较. 相同点: 1. 这三个控件都是列表型控件,可以进行列表 ...

  10. [Outlook] Outlook2013能收但无法发送邮件-0x800CCC13, 0x800CCC0B, 0x8004210B

    [20140704更新],在公司收邮件的时候,问题再次出现,错误码:0x800ccc13,按照以下方法测试成功: 1. 按照以前办法,反复重启,失败 2. 按照以下参考连接A中的步骤 a. Click ...