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

代码如下:

<!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>

赞 (0)

相关推荐

  • 原生js和jQuery写的网页选项卡特效对比

    总的来说思路比较简单,就是先获取节点,然后对节点进行相应的处理,下面是完整的页面代码: 原生js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>原生js tab</tit

  • js/jQuery简单实现选项卡功能

    第一种方法是用原生的js代码如下: 复制代码 代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>简单选项卡</title>    <style type="text/css">    body,ul,li{margin:0;padding:0;}    body{font:12px/1.5 Ta

  • JQuery 选项卡效果(JS与HTML的分离)

    在实际应用过程中,只要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID. Javascript(jquery)代码如下: 复制代码 代码如下: <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("ul.menu li:first-child&

  • 结构/表现/行为完全分离的选项卡(jquery版和原生JS版)

    结构/表现/行为完全分离的选项卡(jquery版和原生JS版)

    关于思路,和常规选项卡思路一样.点击选项菜单,突出显示,并显示对应的选项.本文实例中主要是通过判断点击菜单在菜单列表中的索引位置来显示或隐藏选项区.原生js还有很多种实现方法(蓝色理想中搜索),为了与jQ版思路保持一致,本文实例用的是循环判断. 详见注释. 另有几点说明: 1. 通过本文DEMO演示,可以很明显的看到原生JS的window.onload=function(){-}与jQuery的$(document).ready(function(){-});的区别,这也是我为什么不用样式定义初

  • jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果

    jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果

    本文实例讲述了jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果.分享给大家供大家参考.具体如下: 这款网页特效主要是tytabs.jquery.min.js插件的实例演示,一个带有漂亮渐变效果的TAB选项卡,演示了一个网页上设置两个选项卡,都是带有淡入淡出的渐变效果,为了演示效果,里面我随便弄了些文字,用时候自己删除吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tytabs-tab-cha-m

  • jQuery实例—选项卡的简单实现(js源码和jQuery)

    jQuery实例—选项卡的简单实现(js源码和jQuery)

    分别利用javascript的源码和jQuery来实现一个简单的选项卡,对比各自的步骤. <!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"> &l

  • 原生JS与jQuery编写简单选项卡

    本文实例为大家分享了JS编写简单选项卡的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery选项卡</title> <style type="text/css"> #div1 div{width: 200px;height: 20

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

    复制代码 代码如下: <!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="

  • 简单了解JS打开url的方法

    这篇文章主要介绍了简单了解JS打开url的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在新标签页中get方式打开url window.open(loginurl_withaccout, "_blank"); 下面根据后台返回的url以及用户名密码字段,以及用户名密码动态生成了带账号的url. $.ax('./front/getURLBySidAndUid', {sysid:sysid}, 'POST', function(d)

  • jquery库文件略庞大用纯js替换jquery的方法

    jquery库文件略庞大,在某些情况下,需要尽量减少加载的文件(文件大小),需要用纯js来编写效果 $('#layer') document.getElementById('layer') $('#layer span') var layer = document.getElementById('layer'); var span = layer.getElementsByTagName('span'); $('#inner').parent() document.getElementById(

  • asp.net后台注册js的四种方法分享

    1. 用Response.Write方法 代码如下: 复制代码 代码如下: Response.Write("<script type='text/javascript'>alert("keleyi.com");</script>"); 此方法缺陷就是不能调用脚本文件中的自定义的函数,只能调用内部函数,具体调用自定义的函数只能在Response.Write写上函数定 义,比如 复制代码 代码如下: Response.Write("&l

  • 简单的MySQL备份与还原方法分享

    为了安全起见,需要经常对数据库作备份,或者还原.对于 MySQL 而言,最方便的方法可能就是用 phpMyAdmin 的导出.导入功能了,但如果你的数据库体积比较大,作为 Web 应用的 phpMyAdmin 可能会遭遇"超时"而操作失败.所以,学会在命令行模式下备份.还原数据库,还是很有必要的. Linux系统下 备份数据库 在 Linux 命令行模式下备份 MySQL 数据库,用的是 mysqldump 命令: mysqldump -u mysqluser -p test_db 对

  • JS html时钟制作代码分享

    JS html时钟制作代码分享

    时钟效果图: 闲来无聊做了一个网页的时钟,效果模拟传统时钟的运行方式, 运用了html 的画布实现指针,背景图片引用了网络图片. 具体原理: 首先将时钟分为四个不同区域,对每个区域计算cos,sin 来确实指针顶点位置.在通过画布来绘画出指针. 通过setInterval 每秒刷新指针位置实现 传统机械表针的动态跳动. 本人是JS开发程序员,从业1年多.闲来无聊的简单页面, 欢迎大家提问,或者建议.共同进步 代码部分,直接复制HTML 文件中即可查看效果: <!DOCTYPE html> &l

  • JS中的异常处理方法分享

    js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要不用户体验不好) 复制代码 代码如下: window.onerror=function(){return true;} 下面是为了获取js异常信息,方便开发者找回问题 1,try...catch... 复制代码 代码如下: <script type="text/javascript">var txt=""function message(){try   {   adddlert

  • 最丑的时钟效果！js canvas时钟制作方法

    最丑的时钟效果！js canvas时钟制作方法

    今日就发个丑丑的时钟,老实说 有没有什么调试canvas的工具,老是要在浏览器刷新查看效果,好累啊~  (┬＿┬) 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background: #eee; } canvas{ ba

  • 随机图片生成器制作方法分享

    复制代码 代码如下: /// <summary>    /// PicHandler1 的摘要说明    /// </summary>    public class PicHandler1 : IHttpHandler, IRequiresSessionState    {        private string mCheckNo = string.Empty;        protected ImgBuilder _ImgBuilder = new ImgBuilder(

  • JS简单获取日期相差天数的方法

    本文实例讲述了JS简单获取日期相差天数的方法.分享给大家供大家参考,具体如下: <html> <head> <meta charset="utf-8"> <title>JS日期相差天数</title> </head> <body> <SCRIPT LANGUAGE="JavaScript"> var s1 = '2016-05-12'; s1 = new Date(s1.

随机推荐