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>
  • 相关阅读:
    Android之普通对话框
    Android之TelephonyManager类的使用案例
    Android之快捷方式一——通过应用程序创建快捷方式
    Android之手机电池电量应用
    Android之TelephonyManager类的方法详解
    Android之菜单二——上下文菜单
    jpa一对多映射案例
    Android之桌面组件App Widget初探
    Android之列表对话框
    Android之快捷方式二——向Launcher添加快捷方式
  • 原文地址:https://www.cnblogs.com/baipeng/p/6613203.html
Copyright © 2011-2022 走看看