读大学的时候老师讲ChangTab（如图）是使用的javascript，当时感觉很神奇，今天在自己学习CSS特效的时候想起这个列子，想起教我网站设计的黄波老师，在此谢谢他孜孜不倦的教授我知识。
JavaScript中实现思路为：
当鼠标经过菜单列表上的某个超链接时
（1）将所有菜单（共4个）的背景设为btn_dark.png和该菜单项下的内容显示(display)属性设置为none;
（2）将相应菜单的背景设为btn_light.png和该菜单项下的内容显示（display）属性设置为block;
CSS中实现思路为：
（1）将内容ul写入菜单ul的li中，通过伪类：hover来模拟鼠标经过事件；
关于JavaScript中实现，我不写了，我们主要关注CSS特效；
用CSS特效分为两方面剖析html和css。
第一方面：我们可以从修改前和修改后来看html的结构变化。
修改前的html：
Code
<div id="Content">
<ul id="Menu">
<li><a href="#" id="Menu1" style=" background-image:url(images/btn_light.png);" onmouseover="ShowMenu(1);">52CSS.com</a></li>
<li><a href="#" id="Menu2" style=" background-image:url(images/btn_dark.png);" onmouseover="ShowMenu(2);">Div CSS教程</a></li>
<li><a href="#" id="Menu3" style=" background-image:url(images/btn_dark.png);" onmouseover="ShowMenu(3);">CSS布局实例</a></li>
<li><a href="#" id="Menu4" style=" background-image:url(images/btn_dark.png);" onmouseover="ShowMenu(4);">WEB标准化</a></li>
</ul>
<div class="MenuContent" id="MenuContent1" style="display: block;">
<ul>
<li>•<a href="#" title="">Web Developer插件教程 CSS网页布局辅助设计利器！详细图文讲解！</a></li>
<li>•<a href="#" title="">CSS Templates 频道4月5日更新 增加模板22套</a></li>
<li>•<a href="#" title="">XHTML与CSS入门经典 从零开始系列教程！</a></li>
<li>•<a href="#" title="">DIV+CSS布局入门示例（目录）</a></li>
<li>•<a href="#" title="">CSS基础教程17篇 [翻译Htmldog]</a></li>
<li>•<a href="#" title="">DIV CSS布局实例：用css网站布局之十步实录！（目录） </a></li>
<li>•<a href="#" title="">WEB2.0标准教程 循序渐进十二天的基础学习！</a></li>
<li>•<a href="#" title="">Div+CSS 网页布局 教程！</a></li>
</ul>
</div>
<div class="MenuContent" id="MenuContent2" style="display: none;">
<ul>
<li>•<a href="#" title="">DIV+CSS的XHTML代码结构浅谈 - 不要真DIV+CSS了</a></li>
<li>•<a href="#" title="">Div CSS教程：letter-spacing与word-spacing属性详解</a></li>
<li>•<a href="#" title="">margin外边距属性在inline内联元素中应用的测试！</a></li>
<li>•<a href="#3" title="">Div CSS教程：block element与inline element元素详解 </a></li>
<li>•<a href="#" title="">DIV CSS实例教程：一款清新风格的CSS新闻列表制作</a></li>
<li>•<a href="#" title="">DIV CSS布局中如何组织样式表以便于简化、维护</a></li>
<li>•<a href="#" title="">DIV CSS编码中容易犯的一些错误 DIV CSS编码中容易犯的一些错误</a></li>
<li>•<a href="#" title="">如何将XHTML+CSS页面转换为打印机页面</a></li>
</ul>
</div>
<div class="MenuContent" id="MenuContent3" style="display: none;">
<ul>
<li>•<a href="#" title="">IE6、IE7绝对定位与链接 问题研究</a></li>
<li>•<a href="#" title="">CSS实例：无懈可击的CSS圆角技术！</a></li>
<li>•<a href="#" title="">CSS布局教程：DIV+CSS三列式布局的实现方法</a></li>
<li>•<a href="#" title="">CSS基础实例：CSS实现带背景图片的文字链接的方法</a></li>
<li>•<a href="#" title="">Div+CSS实例：如何用CSS实现背景半透明效果</a></li>
<li>•<a href="#" title="">CSS实例：list-style-type在IE与FF中奇怪的现象解析</a></li>
<li>•<a href="#" title="">Div CSS布局关于分辨率与100%自适应问题的探讨！</a></li>
<li>•<a href="#" title="">CSS实例：如何让无空格的长字符在IE和FF下面实现自动换行？</a></li>
</ul>
</div>
<div class="MenuContent" id="MenuContent4" style="display: none;">
<ul>
<li>•<a href="#" title="">CSS实用案例集(第2版) － CSS Cookbook</a></li>
<li>•<a href="#" title="">CSS禅意花园 读后感</a></li>
<li>•<a href="#" title="">CSS实战手册 公开发行 强烈推荐！2007年第17届Jolt 生产效率大奖</a></li>
<li>•<a href="#" title="">CSSer：你该如何发展，如何学习进步？</a></li>
<li>•<a href="#" title="">The ultimate webdesign usability checklist</a></li>
<li>•<a href="#" title="">Adobe Dreamweaver CS3 新功能简介</a></li>
<li>•<a href="#" title="">Web Standards与Web2.0应有所区别！</a></li>
<li>•<a href="#" title="">CSS教程：是什么使得CSS改善了WEB网站的可访问性</a></li>
</ul>
</div>
</div>
修改之后的html:
Code
<div id="Content">
<ul id="Menu">
<li id="fli"><a href="#" >52CSS.com</a>
<ul id="ful">
<li><a href="#" title="">Web Developer插件教程 CSS网页布局辅助设计利器！详细图文讲解！</a></li>
<li><a href="#" title="">CSS Templates 频道4月5日更新 增加模板22套</a></li>
<li><a href="#" title="">XHTML与CSS入门经典 从零开始系列教程！</a></li>
<li><a href="#" title="">DIV+CSS布局入门示例（目录）</a></li>
<li><a href="#" title="">CSS基础教程17篇 [翻译Htmldog]</a></li>
<li><a href="#" title="">DIV CSS布局实例：用css网站布局之十步实录！（目录） </a></li>
<li><a href="#" title="">WEB2.0标准教程 循序渐进十二天的基础学习！</a></li>
<li><a href="#" title="">Div+CSS 网页布局 教程！</a></li>
</ul>
</li>
<li><a href="#" >Div CSS教程</a>
<ul>
<li><a href="#" title="">DIV+CSS的XHTML代码结构浅谈 - 不要真DIV+CSS了</a></li>
<li><a href="#" title="">Div CSS教程：letter-spacing与word-spacing属性详解</a></li>
<li><a href="#" title="">margin外边距属性在inline内联元素中应用的测试！</a></li>
<li><a href="#3" title="">Div CSS教程：block element与inline element元素详解 </a></li>
<li><a href="#" title="">DIV CSS实例教程：一款清新风格的CSS新闻列表制作</a></li>
<li><a href="#" title="">DIV CSS布局中如何组织样式表以便于简化、维护</a></li>
<li><a href="#" title="">DIV CSS编码中容易犯的一些错误 DIV CSS编码中容易犯的一些错误</a></li>
<li><a href="#" title="">如何将XHTML+CSS页面转换为打印机页面</a></li>
</ul>
</li>
<li><a href="#" >CSS布局实例</a> <ul>
<li><a href="#" title="">IE6、IE7绝对定位与链接 问题研究</a></li>
<li><a href="#" title="">CSS实例：无懈可击的CSS圆角技术！</a></li>
<li><a href="#" title="">CSS布局教程：DIV+CSS三列式布局的实现方法</a></li>
<li><a href="#" title="">CSS基础实例：CSS实现带背景图片的文字链接的方法</a></li>
<li><a href="#" title="">Div+CSS实例：如何用CSS实现背景半透明效果</a></li>
<li><a href="#" title="">CSS实例：list-style-type在IE与FF中奇怪的现象解析</a></li>
<li><a href="#" title="">Div CSS布局关于分辨率与100%自适应问题的探讨！</a></li>
<li><a href="#" title="">CSS实例：如何让无空格的长字符在IE和FF下面实现自动换行？</a></li>
</ul></li>
<li><a href="#" >WEB标准化</a>
<ul>
<li><a href="#" title="">CSS实用案例集(第2版) － CSS Cookbook</a></li>
<li><a href="#" title="">CSS禅意花园 读后感</a></li>
<li><a href="#" title="">CSS实战手册 公开发行 强烈推荐！2007年第17届Jolt 生产效率大奖</a></li>
<li><a href="#" title="">CSSer：你该如何发展，如何学习进步？</a></li>
<li><a href="#" title="">The ultimate webdesign usability checklist</a></li>
<li><a href="#" title="">Adobe Dreamweaver CS3 新功能简介</a></li>
<li><a href="#" title="">Web Standards与Web2.0应有所区别！</a></li>
<li><a href="#" title="">CSS教程：是什么使得CSS改善了WEB网站的可访问性</a></li>
</ul>
</li>
</ul>
</div>
对比之后我们发现改写前后html的结构发生了一些变化。改写之前的有5个ul，我称第1个为菜单ul其余四个为内容ul，这5个ul结构是水平（不包含）。改写后依然为5个ul，但是结构有所变化，菜单ul中包含四个内容ul，准确的说是把这四个内容ul包含在菜单ul的li中。
这样改写的原因是我要通过菜单ul中的li配合伪类模拟javascript的鼠标事件。
第二方面，关于CSS
改写之前：
Code
*
{
list-style-type: none;
font-size: 12px;
text-decoration: none;
margin: 0;
padding: 0;
}
#Content
{
width: 438px;
height: 300px;
overflow: hidden;
margin: 50px auto;
}
#Content #Menu
{
width: 438px;
height: 30px;
overflow: hidden;
}
#Content #Menu li
{
display: block;
float: left;
margin: 0 2px 0 0;
display: inline;
text-align: center;
}
#Content #Menu li a
{
display: block;
width: 90px;
height: 30px;
line-height: 34px;
color: #fff;
}
#Content #Menu li a:hover
{
color: #f0f0f0;
text-decoration: underline;
}
.MenuContent
{
display: block;
width: 438px;
height: 270px;
background: url(images/con_bg.png) no-repeat 0 0;
overflow: hidden;
}
.MenuContent ul
{
width: 418px;
height: 250px;
margin: 12px auto;
}
.MenuContent ul li
{
width: 418px;
line-height: 30px;
margin: 0 auto;
white-space: nowrap;
/*text-overflow: ellipsis;*//*非IE不支持*/
overflow: hidden;
}
.MenuContent ul li a
{
color:#03c;
}
.MenuContent ul li a:hover
{
color: #069;
text-decoration: underline;
}
改写之后：
Code
/*设置所有元素*/
*
{
list-style-type: none;
font-size: 12px;
text-decoration: none;
margin: 0;
padding: 0;
}
/*设置显示的内容区域*/
#Content
{
width: 438px;
height: 300px;
overflow: hidden;
margin: 50px auto;
}
/*使其成为相对定位（relative）改变默认的静态（static ），便于中的ul使用绝对定位*/
#Menu
{
position:relative;}
/*设置菜单*/
#Menu li
{
display: block;
float: left;
margin: 0 5px 0 0;
text-align: center;
background-image:url(images/btn_dark.png);
width:91px;
height:32px;
}
/*设置菜单中链接,display: block很重要*/
#Menu li a
{
display: block;
width: 90px;
height: 30px;
line-height: 34px;
color: #fff;
}
/*设置菜单中链接鼠标经过时的状态*/
#Menu li a:hover
{
background-image:url(images/btn_light.png);
}
/*隐藏ul*/
#Menu li ul
{
display: none;
}
/*设置菜单中第一个内容ul的样式，初始状态为显示*/
#Menu li #ful
{
display:block;
width: 438px;
height: 270px;
background: url(images/con_bg.png) no-repeat 0 0;
overflow: hidden;
text-align:left;
display:block;
position:absolute;
top:31px;
left:0;
}
/*设置菜单中ul的样式*/
#Menu li:hover ul
{
display:block;
width: 438px;
height: 270px;
background: url(images/con_bg.png) no-repeat 0 0;
overflow: hidden;
text-align:left;
display:block;
position:absolute; /*使用绝对定位使所有内容ul出现在固定的位置*/
top:31px;
left:0;
}
/*设置菜单中ul中li的样式*/
#Menu li ul li
{
text-align:left;
display:block;
width: 418px;
line-height: 30px;
margin: 0 auto;
white-space: nowrap;
/*text-overflow: ellipsis;*//*非IE不支持*/
overflow: hidden;
background-image:none;
margin-left:20px;
}
/*设置菜单中ul中接鼠标经过时li的样式*/
#Menu li ul li :hover
{
background-image:none; /*使其无背景图片*/
}
/*设置菜单中ul中a的样式*/
#Menu li ul li a
{
display:block;
height:30px;
color:#000000;
}
/*设置菜单中ul中鼠标经过a的样式*/
#Menu li ul li a:hover
{
text-decoration:underline;
}
对比之后发现利用伪类hover的状态进行改变内容ul的中的样式来实现我想要的效果。
总结：通过以上例子我们看到，CSS特效是通过伪类来实现JavaScript的鼠标事件。在html中注意结构。值得关注的一点，我使用的标签选择器，CSS中的相同标签都要受作用。
文件下载：http://files.cnblogs.com/liuhai250485/ChangeTab.rar
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
