首页 > 代码库 > tab选项卡实例

tab选项卡实例

2024-09-10 11:19:03   215人阅读

之前也见了不少的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选项卡实例


联系
我们