ASP.NET除了JS怎么实现滑动门
如题,不用JS,ASP.NET怎样实现滑动门技术
[最优解释]
网页的滑动门技术很简单,难得是用css写得漂亮。js仅充当改变样式。样式里display属性控制显隐
代码如下
<div class="mainTopTab">
<ul id="tabs">
<li class="curr" onmouseover="tabs(this);"> <span>新闻资讯</span>
<ol>
<li><a href="#">xxxx</a></li>
<li><a href="#">xxxx</a></li>
</ol>
</li>
<li onmouseover="tabs(this);"> <span>新经济人</span>
<ol>
<li><a href="#">xxxx</a></li>
<li><a href="#">xxxx</a></li>
</ol>
</li>
<li onmouseover="tabs(this);"> <span>最新入库</span>
<ol>
<li><a href="#">xxxx</a></li>
<li><a href="#">xxxxx</a></li>
</ol>
</li>
</ul>
<div class="clear"></div>
</div>
<script type="text/javascript">
function tabs(e)
{
var tabs =document.getElementById('tabs').getElementsByTagName('li');
for(var i = 0;i<tabs.length;i++)
{
tabs[i].className = '';
}
e.className = 'curr';
}
</script>
.mainTopTab {width:216px;position:relative;border:1px solid #dadada; margin-top:12px; height:230px;}
.mainTopTab ul li { width:72px; height:31px; line-height:31px; text-align:center; font-size:14px; float:left; display:inline; }
.mainTopTab ul li ol {position:absolute; width:216px;left:0; top:36px;padding:7px 0; display:none; z-index:0;}
.mainTopTab ul li ol li { font-size:12px; font-weight:normal; width:178px; padding-left:20px; text-align:left; background:url(../../Images/dot.gif) 10px 50% no-repeat; line-height:22px; height:22px; overflow:hidden;}
.mainTopTab ul li.curr ol { display:block;}
.mainTopTab ul li.curr {border:0;font-weight:bold;}
.mainTopTab ul li.curr span {background-image:url(../../Images/tabon.jpg); color:#000;}
.mainTopTab ul li span { color:#7e7e7e;cursor:pointer; display:block;position:relative; z-index:1;border-right:1px solid #dbdbdb;background:url(../../Images/taboff.jpg) repeat-x 0 0; height:31px;}