tab选项卡实例
Posted kevin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于tab选项卡实例的主要内容，如果未能解决你的问题，请参考以下文章
如何从选项卡片段中的 AsyncTask Resftful WS 加载批量数据