完全可以哦,滑动式的利用css的hover,也就是纯css菜单的原理,
点击式的利用的是锚点的原理。
实例如下:
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>纯CSS实现的Tab</title>
<style>
*{ margin:0 padding:0}
#main{width:500px margin:100px auto}
#title>a{ float:left border:1px solid #000 padding:2px 4px display:block text-decoration:none color:#000}
#content{ width:500px height:300px border:1px solid #000 overflow:hidden}
#content>div{float:left padding:2px 4px width:500px height:300px}
#a1:hover #a2>#tab2{ display:block}
</style>
</head>
<body>
<div id="main">
<div id="title">
<a href="#tab1">tab1title</a>
<a href="#tab2">tab2title</a>
<a href="#tab3">tab3title</a>
<a href="#tab4">tab4title</a>
<div style="clear:both"></div>
</div>
<div id="content">
<div id="tab1"> tab1 content </div>
<div id="tab2"> tab2 content </div>
<div id="tab3"> tab3 content </div>
<div id="tab4"> tab4 content </div>
<div style="clear:both"></div>
</div>
</div>
</body>
</html>
理论上,BC默认的display:none当鼠标hoverA的时候,$("B,C").css("display","normal'),当鼠标离开的时候在把display设置为none,或者当你不考虑兼容性时,可以考虑用透明度做