简单的TabView(JS+CSS)

最新推荐文章于 2025-04-12 15:35:24 发布

JerryLZQ

最新推荐文章于 2025-04-12 15:35:24 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web程序(ASP.NET/ASP) 文章标签： css border div class function float

本文链接：https://blog.youkuaiyun.com/JerryLZQ/article/details/1510491

Web程序(ASP.NET/ASP) 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的TabView组件实现方案，使用JS与CSS配合完成页面切换功能。通过修改函数可以使组件更加灵活，适用于不同场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单的TabView(JS+CSS)

先看一下效果：
http://www.XiTeJia.com/

我是按自己的页面需要做的。修改函数可以变得更灵活。相信根据这个思路，对新手制作TabView有帮助。

JS部分：
var Folder1 = new Array('Tab1','Page1'); //Tab1是Tab的ID,Page1是Tab1显示的页面的ID
var Folder2 = new Array('Tab2','Page2');
var Folder3 = new Array('Tab3','Page3');
var Folder4 = new Array('Tab4','Page4');
var TabCount = 4; //Tab的个数。这里为了简单直接给了个数值。如果要灵活点，可以用循环遍历。

function TabViewInit(){
var count = 1;
while(eval('window.Folder'+count)){
AddEvent(eval('Folder'+count)[0]);
count++;
}
}

function AddEvent(obj){
var oBtn = document.all[obj];
oBtn.attachEvent('onclick', Tab_OnClick);
}

CSS部分：
#TabView{
background-color:#FFF;
margin:.5em .5em 4em .5em;
}

#TabTitle{

}
#TabTitle ul li{
float: left;
margin-right:0.5em;
padding:7px;
}
#TabTitle ul li:hover{
color:#7D4800;
background-color:#FFF;
}

#TabPage{
border:solid 1px #CCC;
margin-bottom:-1px;
padding:10px;
}

.TabActive{
cursor:default;
border:1px solid #CCC;
border-top:0;
color:#7D4800;
background-color:#FFF;
}

.TabInActive{
cursor:pointer;
border:1px solid #CCC;
color:#666666;
background-color:#EFEFEF;
}

HTML部分：
<div id="TabView">
<div id="TabPage">
    <div id="Page1" style="display:block;">
      <table width="100%" border="0">
        <tr>
          <td width="50%"><img src="img/Product/battery.jpg" alt="电动车充电器" width="180" height="103" /></td>
          <td><h4>电动车充电器</h4>
            <p><strong>喜特佳</strong>生产的充电器主要适应于轻便电动车的电池。有多种规格、多种颜色、多种插口可选择。</p>
   <p align="right">规格可根据客户定制。</p><br /><br />
            <a class="more" href="battery.html">更多型号</a></td>
        </tr>
      </table>
   </div>
<div id="Page2" style="display:none;">
</div>
<div id="Page3" style="display:none;">
</div>
<div id="Page4" style="display:none;">
</div>
<div id="TabTitle">
    <ul>
      <li id="Tab1" class="TabActive">电动车充电器</li>
      <li id="Tab2" class="TabInActive">环形变压器</li>
      <li id="Tab3" class="TabInActive">EI变压器</li>
      <li id="Tab4" class="TabInActive">电源适配器</li>
    </ul>
</div>
</div>