 |
热门文章 |
|
|
|
相关文章 |
|
| 没有相关文章 |
|
|
| 关于选项卡效果的实现方法 |
来源：百度空间 更新时间：2010/8/4 0:03:13 阅读次数：
字体：[大 中 小大 中 小大 中 小] 我要投稿 |
1、什么是选项卡效果
严格地说，我们所说的选项卡原身是Windows操作系统的一个创意，即通过交换选项，让很多项目信息轮替显示在大小和位置都固定的小块区域里。因此选项卡具有占用篇幅小，辐射内容大的特点。一个典型的例子是你打开IE浏览器，依次点击“工具”-“Internet选项”，这个表单就是一个选项卡典型布局。当然了，这里我说的选项卡效果是要在Web页面实现的，并非应用程序里的菜单选项。
2、选项卡效果原理
说白了，选项卡就是事先准备若干钥匙和门，我们把钥匙串成一串交给浏览者，每把钥匙对应一扇门，浏览者手中掌握钥匙，要打开哪扇门看他自己的兴趣。当然了，每把钥匙对应的门也是网页设计者事先设计好了的。只不过，浏览者只能够每次打开一扇门并观看门里的内容，打开了另一扇门，就关闭了前一扇门。
好了，我们首先要准备若干把钥匙，索性命名为key。我们通常用项目列表<li>表现钥匙：
<div id=”key”>
<ul>
<li id=”key1”>川菜菜谱</li>
<li id=”key2”>沪菜菜谱</li>
<li id=”key3”>东北菜谱</li>
<li id=”key4”>淮扬菜谱</li>
</ul>
</div>
我们把门命名为detail。因为实际设计会有很多内容，我们把detail放在<div>里面，四把钥匙对应四扇门：
<div id=”detail1”>
<ul>
<li>雪花鸡淖</li>
<li>火爆腰花</li>
<li>酸辣臊子蹄筋</li>
<li>炝黄瓜</li>
<li>麻酱凤尾</li>
<li>家常海参</li>
<li>鲜花豆腐</li>
<li>坛子肉</li>
<li>鱼香牛肉丝</li>
<li>参麦团鱼</li>
</ul>
</div>
<div id=”detail2”>
<ul>
<li>八宝辣酱</li>
<li>白肚</li>
<li>火夹糟青鱼</li>
<li>鸡火干丝</li>
<li>鸡汁排翅</li>
<li>上海锅贴</li>
<li>八宝鸭</li>
<li>白汁鮰鱼</li>
<li>爆鱿鱼卷</li>
<li>冰糖甲鱼</li>
</ul>
</div>
<div id=”detail3”>
<ul>
<li>甩袖汤</li>
<li>板栗烧鸡</li>
<li>拌肉皮丝</li>
<li>红烧肘子</li>
<li>花椒嫩醉鸡</li>
<li>熘肥肠</li>
<li>茄汁草鱼片</li>
<li>酸辣萝卜丝</li>
<li>瑶柱鱼翅</li>
<li>玉箸山珍</li>
</ul>
</div>
<div id=”detail4”>
<ul>
<li>三丝敲鱼</li>
<li>砂锅豆腐</li>
<li>鲜豆腐皮炒青蟹肉</li>
<li>白烧四宝</li>
<li>脆皮卷</li>
<li>淡菜炒笋尖</li>
<li>冻鸭</li>
<li>和合腰子</li>
<li>荷花集锦炖</li>
<li>红果拌梨丝</li>
</ul>
</div>
哈哈！搞了一些好吃的，不要流口水啦！我们把key并排排列，关键要用到Display:inline样式，给出全部CSS参考代码：
#key{
Width:410px;
margin:0px;
}
#key ul{
List-type:none;
Width:401px;
Margin:0px;
Padding:0px;
}
#key li{
background:url(button_bg1.gif) 0px 2px no-repeat;
Display:inline;
overflow:visible;
Width:100px;
Margin:0px;
Padding:7px 10px;
Text-align:center;
Font-size:14px;
Line-height:14px;
letter-spacing:2px;
}
因为detail层最开始是不可见的（至多设一个初始的“门”），所以我们用到的关键样式是display:none。给出CSS参考代码如下：
#detail1,#detail2,#detail3,#detail4{
Display:none;
Width:400px;
Border:1px #C84742 solid;
Border-top-width:0px;
Padding:10px 0px 0px 0px;
Font-size:12px;
Line-height:18px;
}
钥匙和门都准备好了，下面我们来实现具体效果。当然是用javascript调用样式表了。在写出具体的代码之前，下面的伪代码有助于你理解全部流程：
<代码开始>
定义函数showDetail(层名称){
首先将选中的钥匙改变为选中样式;
var j;
var id;
var e;//为了以后调用方便，定义三个全局变量
设计一个循环，使得从第一把钥匙到最后一把钥匙轮替时{
id =钥匙+编号;
j = 调用各把钥匙的编号;
e = 调用的各扇门;
如果(钥匙+编号!= 选中钥匙的编号){
将这把/些钥匙的样式还原为原始样式;
还要将这把/些钥匙所对应的门设为不可见;
}
如果不是这样{
则打开钥匙对应的门;
}
}//循环结束
}//函数结束
</代码结束>
希望大家已经看懂了上述伪代码，其实就是一个函数，一个循环，三个全局变量而已。
<script type="text/javascript">
function showDetail(obj){
document.getElementById(obj.id).style.background="url(button_bg2.gif)";
for(var i=1;i<=4;i++){
var id ="key"+i;
var keyItem = document.getElementById(id);
var detailItem = document.getElementById("detail"+i);
if(id != obj.id){
document.getElementById(id).style.background="url(button_bg1.gif) 0px 2px no-repeat";
detailItem.style.display = "none";
}
else{
detailItem.style.display = "block";
}
}
}
</script>
做出最精彩的选项卡效果，关键之处是CSS样式，可以把背景做成漂亮的颜色变化的图片。本例侧重于讨论技术，一旦熟知了选项卡的作用原理，相信你会有属于自己的精彩创意！ |
| 上一篇文章： 让HTML页面像ASP页面一样接受参数下一篇文章： 使用JS查找XML内部节点与属性值 |
|
|
|
注册 登录
