如何使用Javascript和Jquery创建选项卡
How to create tabs using Javascript and Jquery
如何在一个页面上创建多个选项卡?例如,您单击菜单上的按钮,页面就会滑动进来。url在此过程中不会更改。有办法做到这一点与jquery, javascript?我有html和css。
div.tabContent.hide {
display: none;
}
nav {
background: rgba(0, 0, 0, 0);
height: 80px;
border-radius: 0px;
}
nav ul {
width: 50%;
margin: auto;
}
nav ul li {
list-style-type: none;
width: 150px;
margin-top: 15px;
float: left;
border: none;
text-align: center;
}
li a {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
text-decoration: none;
color: #333333;
border-radius: 0px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
line-height: 50px;
display: block;
transition: all ease-in-out 250ms;
}
li a:hover {
background: rgba(255, 255, 255, .2);
box-shadow: 0 8px 8px -6px #333;
color: #222222;
padding: 0px 0px;
text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
<nav>
<ul id="tabs">
<li>
<a href="#home" style="font-weight: bold;">Home</a>
</li>
<li>
<a href="#products" style="font-weight: bold;">Products</a>
</li>
<li>
<a href="#order" style="font-weight: bold;">Order</a>
</li>
<li>
<a href="#settings" style="font-weight: bold;">Settings</a>
</li>
</ul>
</nav>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- This page is copyright Elated Communications Ltd. (www.elated.com) -->
<title>JavaScript tabs example</title>
<style type="text/css">
body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans- Serif; }
ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
ul#tabs li { display: inline; }
ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
ul#tabs li a:hover { background-color: #f1f0ee; }
ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font- weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background- color: #f1f0ee; }
div.tabContent.hide { display: none; }
</style>
<script type="text/javascript">
//<![CDATA[
var tabLinks = new Array();
var contentDivs = new Array();
function init() {
// Grab the tab links and content divs from the page
var tabListItems = document.getElementById('tabs').childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems[i].nodeName == "LI" ) {
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
var id = getHash( tabLink.getAttribute('href') );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );
}
}
// Assign onclick events to the tab links, and
// highlight the first tab
var i = 0;
for ( var id in tabLinks ) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() { this.blur() };
if ( i == 0 ) tabLinks[id].className = 'selected';
i++;
}
// Hide all content divs except the first
var i = 0;
for ( var id in contentDivs ) {
if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
i++;
}
}
function showTab() {
var selectedId = getHash( this.getAttribute('href') );
// Highlight the selected tab, and dim all others.
// Also show the selected content div, and hide all others.
for ( var id in contentDivs ) {
if ( id == selectedId ) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}
// Stop the browser following the link
return false;
}
function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
}
}
function getHash( url ) {
var hashPos = url.lastIndexOf ( '#' );
return url.substring( hashPos + 1 );
}
//]]>
</script>
</head>
<body onload="init()">
<h1>JavaScript tabs example</h1>
<ul id="tabs">
<li><a href="#about">About JavaScript tabs</a></li>
<li><a href="#advantages">Advantages of tabs</a></li>
<li><a href="#usage">Using tabs</a></li>
</ul>
<div class="tabContent" id="about">
<h2>About JavaScript tabs</h2>
<div>
<p>JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.</p>
<p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p>
</div>
</div>
<div class="tabContent" id="advantages">
<h2>Advantages of tabs</h2>
<div>
<p>JavaScript tabs are great if your Web page contains a large amount of content.</p>
<p>They're also good for things like multi-step Web forms.</p>
</div>
</div>
<div class="tabContent" id="usage">
<h2>Using tabs</h2>
<div>
<p>Click a tab to view the tab's content. Using tabs couldn't be easier! </p>
</div>
</div>
</body>
</html>
相关文章:
- jqueryui选项卡,根据数据库中的值创建选项卡
- 创建选项卡,每个选项卡有两个文本区域
- 创建选项onClick属性
- jquery ui自动完成combox重新创建选项不起作用
- 如何在创建选项时更改其背景图像
- 如何使用 JSP 创建选项卡式 Html 页面
- JavaScript - 有没有更有效的方法来创建选项元素
- Angular 创建选项卡视图而不会丢失数据
- 我正在尝试在 JavaScript 中创建选项卡式内容,但它只工作一次
- 使用 jQuery 创建选项卡
- 使用jqueryeasyui,如何通过选项卡中的链接创建选项卡
- 用于创建选项卡的javascript
- JQuery正在创建选项卡,tabs()函数出现问题
- 使用javascript为selectbox动态创建选项
- 在aspx中为应用程序表单创建选项卡
- 如何使用Javascript和Jquery创建选项卡
- 使用函数创建选项卡
- 从数组中的值创建选项元素
- 无法在html中创建选项卡面板
- Bootstrap插件创建选项按钮与任意js