简单选项卡 js和jquery制作方法分享


Posted in Javascript onFebruary 26, 2014
<!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" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript">
 $(function(){
      $("#ul2 li").click(function(){
          var num = $(this).index();
          $("#con2 div").css("display","none");
          $("#con2 div").eq(num).css("display","block")
          })
     })
</script>
<script type="text/javascript">
  window.onload = function(){
      var ss = document.getElementById("ul1").getElementsByTagName("li");
      var pa = document.getElementById("con");
      var div = pa.getElementsByTagName("div");
      //alert(div.length)
      var ch;
      for(var i = 0;i < ss.length;i++){
          ss[i].index = i;
           ss[i].onclick = function(){
               ch = this.index;
               for(var j = 0; j<div.length; j++){
            div[j].style.display = "none";
            if(j == ch){
                div[j].style.display = "block";
                }
            }
               }
          }      }
</script>
<style type="text/css">
li{
    float:left;
    height:30px;
    width:100px;
    border:1px #036 solid;
    list-style:none;
    text-align:center}
#con,#con2{
    clear:both;
    border:1px #0CF solid;
    height:200px;
    width:200px;
    overflow:hidden}
#con div,#con2 div{
    height:200px;
    width:200px;
    display:none}


</style>
</head>
<body>
<!--js方法实现-->
<ul id="ul1">
  <li>标题一</li>
  <li>标题二</li>
  <li>标题三</li>
</ul>
<div id="con">
   <div style="display:block">内容一</div>
   <div>内容二</div>
   <div>内容三</div>
</div>
<!--jquery方法实现-->
<ul id="ul2">
  <li>标题一</li>
  <li>标题二</li>
  <li>标题三</li>
</ul>
<div id="con2">
   <div style="display:block">内容一</div>
   <div>内容二</div>
   <div>内容三</div>
</div>
</body>
</html>
Javascript 相关文章推荐
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
display和visibility的区别示例介绍
Feb 26 #Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 #Javascript
js返回上一页并刷新的多种实现方法
Feb 26 #Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 #Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 #Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 #Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 #Javascript
You might like
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
在PHP中读取和写入WORD文档的代码
2008/04/09 PHP
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
基于python的七种经典排序算法(推荐)
2016/12/08 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
python opencv之分水岭算法示例
2018/02/24 Python
python如何统计序列中元素
2020/07/31 Python
python dict 相同key 合并value的实例
2019/01/21 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
python如何爬取网页中的文字
2020/07/28 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
应届本科生推荐信范文
2013/12/25 职场文书
鲜果饮品店创业计划书
2014/01/21 职场文书
竞选学委演讲稿
2014/09/13 职场文书
分享几个简单MySQL优化小妙招
2022/03/31 MySQL