简单选项卡 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 appendChild,innerHTML,join性能比较代码
Aug 29 Javascript
JQuery live函数
Dec 24 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 Javascript
浅析vue中的nextTick
Dec 28 Vue.js
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
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
理解PHP中的stdClass类
2014/04/18 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
jquery ajax abort()的使用方法
2010/10/28 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
python列表操作实例
2015/01/14 Python
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
Python中常见的数据类型小结
2015/08/29 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
python爬虫请求头的使用
2020/12/01 Python
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
个人优缺点自我评价
2014/01/27 职场文书
公证书标准格式
2014/04/10 职场文书
商场父亲节活动方案
2014/08/27 职场文书
创业计划书之美甲店
2019/09/20 职场文书