星期天看了很多国外的图书出版商的网站！发现Sams的标签显示方式的实践思路不错！标签显示的实践方式一般都要用到:javascript,来动态改变div的显示和隐藏.来看看人家写的JS代码吧:
<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";
}
