用纯CSS如何制作流行的TAB菜单？

html-css011

用纯CSS如何制作流行的TAB菜单？,第1张

Tab菜单比较简单的方法是直接使用dreamweaver cs3的spry制作,其他方法制作难度比较大，不管哪种方法，必须要使用javascript调用。

<ul class="tabs">

<li>

<input type="radio" name="tabs" id="tab1" checked />

<label for="tab1">选项卡 1</label>

<div id="tab-content1" class="tab-content">

<p>选项卡内容 1</p>

</div>

</li>

<li>

<input type="radio" name="tabs" id="tab2" />

<label for="tab2">选项卡 2</label>

<div id="tab-content2" class="tab-content">

<p>选项卡内容 2</p>

</div>

</li>

</ul>

<script type="text/javascript">

function tabSwitch2(_this,content_prefix,active) { 

var tabs = document.getElementsByName(_this.name) 

var number = tabs.length 

for (var i=0 i < number i++) { 

var tab = tabs[i] 

tab.className = ""

tab.parentNode.className = ''

document.getElementById(content_prefix+i).style.display = 'none' 

} 

_this.className = "easytab_active" 

document.getElementById(content_prefix+active).style.display = 'block'

tabs[active].style.className = 'easytab_active'

tabs[active].parentNode.className = 'li1'

} 

</script>

替换一下