转帖，javascript+css 标签显示方式的思考收藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
//<![CDATA[
//标签的数组,如果让我写,我想不到会用这个保存
var tabArray = new Array();
//默认显示哪个标签
function showDefaultTab() {
//show 'Description' tab by default, else show first
if (!showTab('item1')) {
displayToggle(tabArray[0] + "_container", true, 'container on');
document.getElementById(tabArray[0]).className = 'selected';
}
}
//改变内容盒的隐显,并重绘显示样式:感觉有点像配适器模式
function showTab(tabID) {
var found = false;
for (var i = 0; i < tabArray.length; i++) {
if (tabArray[i] != tabID) {
displayToggle(tabArray[i] + "_container", false, 'container');
document.getElementById(tabArray[i]).className = '';
} else {
displayToggle(tabArray[i] + "_container", true, 'container on');
document.getElementById(tabArray[i]).className = 'selected';
found = true;
}
}
return found;
}
//showtab函数会调用这个函数来隐显内容盒
function displayToggle(id, show, newClass) {
var obj = document.getElementById(id);
if (obj != null) {
if (show) {
obj.style.visibility = "visible";
obj.style.display = "block";
} else {
obj.style.visibility = "hidden";
obj.style.display = "none";
}
if (newClass != null)
obj.className = newClass;
}
}
//]]>
</script>
<div id="sitepage">
<div id="productBSS" class="tabwidget">
<ul class="tabs">
<li id="item1">
<a id="info3" href="#info3" onclick="showTab('item1'); return false;">Description</a>
</li>
<script language="JavaScript">
tabArray.push('item1');
</script>
<li id="item2">
<a id="info8" href="#info8" onclick="showTab('item2'); return false;">Sample Content</a>
</li>
<script language="JavaScript">
tabArray.push('item2');
</script>
</ul>
</div>
<div id="bssContent">
<div id="item1_container">
<!--detail content-->
</div>
<div id="item2_container">
<!--detail content-->
</div>
</div>
<script language="JavaScript">
showDefaultTab();
</script>
</div>
<style type="text/css">
<!--
body {margin:150px 0 0 0;font-size:0.8em;font-family:"Lucida Grande", Arial, Helvetica, sans-serif;}
div#sitepage{ margin:0 0 0 184px; padding:0; width:400px;height:auto;}
div#productBSS { clear:both; }
div#bssContent { margin:-1px 0 0 0; padding:1em; border-right:1px solid #C7C8CA; border-left:1px solid #C7C8CA; border-bottom:1px solid #C7C8CA; border-top:1px solid #C7C8CA; }
/* - Tab Widget (blog sidebar) - */
div.tabwidget { border-left: 1px solid #C7C8CA; position: relative; }
/* tab control */
div.tabwidget ul.tabs { list-style: none; margin: 0; padding: 0 0 1px 0; height: 2em; border-bottom: 1px solid #C7C8CA; }
div.tabwidget ul.tabs li { display: block; float: left; background-color:#EEE; border: 1px solid #C7C8CA; border-width: 1px 1px 1px 0; padding: 0 1em; line-height: 2em; margin: 0; }
div.tabwidget ul.tabs li.selected { background-color: #FFF; border-bottom: 1px solid #FFF; }
/* layer control */
div.tabwidget div.container { display: none; clear: both; border: 1px solid #C7C8CA; border-width: 0 1px 1px 0; position: relative; }
div.tabwidget div.on { display: block; }
/* Content control */
:link,:visited { text-decoration:none; }
a:link { color:#004F7F; }
a:visited { color:#2E87B2; }
a:hover, a:active { color:#004F7F; text-decoration:underline; }
-->
</style>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
//<![CDATA[
//标签的数组,如果让我写,我想不到会用这个保存
var tabArray = new Array();
//默认显示哪个标签
function showDefaultTab() {
//show 'Description' tab by default, else show first
if (!showTab('item1')) {
displayToggle(tabArray[0] + "_container", true, 'container on');
document.getElementById(tabArray[0]).className = 'selected';
}
}
//改变内容盒的隐显,并重绘显示样式:感觉有点像配适器模式
function showTab(tabID) {
var found = false;
for (var i = 0; i < tabArray.length; i++) {
if (tabArray[i] != tabID) {
displayToggle(tabArray[i] + "_container", false, 'container');
document.getElementById(tabArray[i]).className = '';
} else {
displayToggle(tabArray[i] + "_container", true, 'container on');
document.getElementById(tabArray[i]).className = 'selected';
found = true;
}
}
return found;
}
//showtab函数会调用这个函数来隐显内容盒
function displayToggle(id, show, newClass) {
var obj = document.getElementById(id);
if (obj != null) {
if (show) {
obj.style.visibility = "visible";
obj.style.display = "block";
} else {
obj.style.visibility = "hidden";
obj.style.display = "none";
}
if (newClass != null)
obj.className = newClass;
}
}
//]]>
</script>
<div id="sitepage">
<div id="productBSS" class="tabwidget">
<ul class="tabs">
<li id="item1">
<a id="info3" href="#info3" onclick="showTab('item1'); return false;">Description</a>
</li>
<script language="JavaScript">
tabArray.push('item1');
</script>
<li id="item2">
<a id="info8" href="#info8" onclick="showTab('item2'); return false;">Sample Content</a>
</li>
<script language="JavaScript">
tabArray.push('item2');
</script>
</ul>
</div>
<div id="bssContent">
<div id="item1_container">
<!--detail content-->
</div>
<div id="item2_container">
<!--detail content-->
</div>
</div>
<script language="JavaScript">
showDefaultTab();
</script>
</div>
<style type="text/css">
<!--
body {margin:150px 0 0 0;font-size:0.8em;font-family:"Lucida Grande", Arial, Helvetica, sans-serif;}
div#sitepage{ margin:0 0 0 184px; padding:0; width:400px;height:auto;}
div#productBSS { clear:both; }
div#bssContent { margin:-1px 0 0 0; padding:1em; border-right:1px solid #C7C8CA; border-left:1px solid #C7C8CA; border-bottom:1px solid #C7C8CA; border-top:1px solid #C7C8CA; }
/* - Tab Widget (blog sidebar) - */
div.tabwidget { border-left: 1px solid #C7C8CA; position: relative; }
/* tab control */
div.tabwidget ul.tabs { list-style: none; margin: 0; padding: 0 0 1px 0; height: 2em; border-bottom: 1px solid #C7C8CA; }
div.tabwidget ul.tabs li { display: block; float: left; background-color:#EEE; border: 1px solid #C7C8CA; border-width: 1px 1px 1px 0; padding: 0 1em; line-height: 2em; margin: 0; }
div.tabwidget ul.tabs li.selected { background-color: #FFF; border-bottom: 1px solid #FFF; }
/* layer control */
div.tabwidget div.container { display: none; clear: both; border: 1px solid #C7C8CA; border-width: 0 1px 1px 0; position: relative; }
div.tabwidget div.on { display: block; }
/* Content control */
:link,:visited { text-decoration:none; }
a:link { color:#004F7F; }
a:visited { color:#2E87B2; }
a:hover, a:active { color:#004F7F; text-decoration:underline; }
-->
</style>
</body>
</html>
