zoukankan      html  css  js  c++  java
  • tab选项卡实例

    之前也见了不少的tab选项卡,但是下面这个选项卡是一个页面中有多个时互不影响的。

    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>jQuery UI Tabs - Open on mouseover</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script>
      $( function() {
        $( "#tabs" ).tabs({
          event: "mouseover"
        });
      } );
       $( function() {
        $( "#tabs1" ).tabs({
          event: "mouseover"
        });
      } );
       $( function() {
        $( "#tabs2" ).tabs({
          event: "mouseover"
        });
      } );
      </script>
    </head>
    <body>
     
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">COSW 10</a></li>
        <li><a href="#tabs-2">COSW 20</a></li>
        <li><a href="#tabs-3">COSW 200</a></li>
       
      </ul>
      <div id="tabs-1">
        <h3>COSW 10: Beginning Website Development</h3>
        <p>This course introduces the fundamental skills needed to design, develop and publish websites using industry standard software. Students will create websites using HTML and CSS and incorporate web design principles such as site planning, usability and accessibility standards.</p>
    <p>Topics covered include formatting text, creating hyperlinks, building navigation menus, inserting images and other media, creating tables and forms, using CSS for layout and design, creating responsive websites and working with content management systems. Students should have completed a basic computer concepts course such as COSA 1 as preparation for this course.</p>
      </div>
      <div id="tabs-2">
        <h3>COSW 20: Advanced Website Development</h3>
        <p>This course is an web page construction course focusing on emerging HTML standards, XML, JavaScript and other scripting languages. Students should already have a basic knowledge of web design such as from COSW 10AD in preparation for taking this course.</p>
      </div>
      <div id="tabs-3">
        <h3>COSW 200: Introduction to JavaScript and jQuery</h3>
        <p>This course provides an overview of client-side programming using JavaScript, variables, arrays, functions, event handlers, objects, form validation, cookies, and the DOM. Introduces Web 2.0 technologies, Ajax (Asynchronous JavaScript and XML and JSON), and it is a introduction to using popular libraries like JQuery.</p>
      </div>
    </div>
     <div id="tabs1">
      <ul>
        <li><a href="#tabs1-1">COSW 10</a></li>
        <li><a href="#tabs1-2">COSW 20</a></li>
        <li><a href="#tabs1-3">COSW 200</a></li>
       
      </ul>
      <div id="tabs1-1">
        <h3>COSW 10: Beginning Website Development</h3>
        <p>This course introduces the fundamental skills needed to design, develop and publish websites using industry standard software. Students will create websites using HTML and CSS and incorporate web design principles such as site planning, usability and accessibility standards.</p>
    <p>Topics covered include formatting text, creating hyperlinks, building navigation menus, inserting images and other media, creating tables and forms, using CSS for layout and design, creating responsive websites and working with content management systems. Students should have completed a basic computer concepts course such as COSA 1 as preparation for this course.</p>
      </div>
      <div id="tabs1-2">
        <h3>COSW 20: Advanced Website Development</h3>
        <p>This course is an web page construction course focusing on emerging HTML standards, XML, JavaScript and other scripting languages. Students should already have a basic knowledge of web design such as from COSW 10AD in preparation for taking this course.</p>
      </div>
      <div id="tabs1-3">
        <h3>COSW 200: Introduction to JavaScript and jQuery</h3>
        <p>This course provides an overview of client-side programming using JavaScript, variables, arrays, functions, event handlers, objects, form validation, cookies, and the DOM. Introduces Web 2.0 technologies, Ajax (Asynchronous JavaScript and XML and JSON), and it is a introduction to using popular libraries like JQuery.</p>
      </div>
    </div>
    
     <div id="tabs2">
      <ul>
        <li><a href="#tabs2-1">COSW 10</a></li>
        <li><a href="#tabs2-2">COSW 20</a></li>
        <li><a href="#tabs2-3">COSW 200</a></li>
       
      </ul>
      <div id="tabs2-1">
        <h3>COSW 10: Beginning Website Development</h3>
        <p>This course introduces the fundamental skills needed to design, develop and publish websites using industry standard software. Students will create websites using HTML and CSS and incorporate web design principles such as site planning, usability and accessibility standards.</p>
    <p>Topics covered include formatting text, creating hyperlinks, building navigation menus, inserting images and other media, creating tables and forms, using CSS for layout and design, creating responsive websites and working with content management systems. Students should have completed a basic computer concepts course such as COSA 1 as preparation for this course.</p>
      </div>
      <div id="tabs2-2">
        <h3>COSW 20: Advanced Website Development</h3>
        <p>This course is an web page construction course focusing on emerging HTML standards, XML, JavaScript and other scripting languages. Students should already have a basic knowledge of web design such as from COSW 10AD in preparation for taking this course.</p>
      </div>
      <div id="tabs2-3">
        <h3>COSW 200: Introduction to JavaScript and jQuery</h3>
        <p>This course provides an overview of client-side programming using JavaScript, variables, arrays, functions, event handlers, objects, form validation, cookies, and the DOM. Introduces Web 2.0 technologies, Ajax (Asynchronous JavaScript and XML and JSON), and it is a introduction to using popular libraries like JQuery.</p>
      </div>
    </div>
     
    </body>
    </html>
  • 相关阅读:
    《VC++深入详解》学习笔记 第十二章 文件和注册表操作
    《VC++深入详解》学习笔记 第九章 定制应用程序外观
    《VC++深入详解》学习笔记 第七、八章对话框
    《VC++深入详解》学习笔记 第六章 菜单
    《VC++深入详解》学习笔记 第五章 文本编程
    《VC++深入详解》学习笔记 第四章 简单绘图
    《VC++深入详解》学习笔记 第三章 MFC框架程序剖析
    Inno_Setup使用笔记(简单完成安装包制作)
    《VC++深入详解》学习笔记 第一章 Windows程序内部运行机制
    搭建eclipse的nodejs开发环境图解
  • 原文地址:https://www.cnblogs.com/baipeng/p/6613203.html
Copyright © 2011-2022 走看看