码迷,mamicode.com
首页 > 其他好文 > 详细

tab选项卡实例

时间:2017-03-24 20:37:34      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:code   man   nbsp   soft   2.0   his   char   uil   systems   

之前也见了不少的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>

 

tab选项卡实例

标签:code   man   nbsp   soft   2.0   his   char   uil   systems   

原文地址:http://www.cnblogs.com/baipeng/p/6613203.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!