简单选项卡 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 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 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
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
PHP children()函数讲解
2019/02/03 PHP
用户注册常用javascript代码
2009/08/29 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
python装饰器使用方法实例
2013/11/21 Python
python简单实现旋转图片的方法
2015/05/30 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
哪些是python中web开发框架
2020/06/17 Python
英国著名书店:Foyles
2018/12/01 全球购物
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
护士长竞聘书
2014/03/31 职场文书
团日活动总结书
2014/05/08 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
给老师的一封感谢信
2015/01/20 职场文书
辩护意见书
2015/06/04 职场文书
今日说法观后感
2015/06/08 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL