`

正宗简单的tab页效果

阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf8">

    <title>常用tab切换</title>

    <style type="text/css">

#box{width:500px;font-size:12px}

#box ul{margin:0;padding:0;list-style:none}

#box #tab{height:25px;padding-left:10px;border-bottom:1px solid #AACBEE}

#box #tab li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer}

#box #tab li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#00f;background:#E8F2F7;position:relative;top:1px}

#box #tab_con{border:1px solid #AACBEE;border-top:none;padding:20px}

#box #tab_con li{display:none}

#box #tab_con #tab_con_1{display:block;}

</style>

</head>

<body>

/*********1**********/

    <div id="box">

        <ul id="tab">

            <li class="on" id="tab_1" onclick="switchTab(1)">新闻</li>

            <li id="tab_2" onclick="switchTab(2)">财经</li>

            <li id="tab_3" onclick="switchTab(3)">娱乐</li>

            <li id="tab_4" onclick="switchTab(4)">娱乐</li>

        </ul>

        <ul id="tab_con">

            <li id="tab_con_1">新闻内容</li>

            <li id="tab_con_2">财经内容</li>

            <li id="tab_con_3">娱乐内容</li>

            <li id="tab_con_4">娱乐内容3</li>

        </ul>

    </div>

    <script type="text/javascript">

        function switchTab(n){

            for(var i = 1; i <= 4; i++){

                document.getElementById("tab_" + i).className = "";

                document.getElementById("tab_con_" + i).style.display = "none";

            }

            document.getElementById("tab_" + n).className = "on";

            document.getElementById("tab_con_" + n).style.display = "block";

        }

</script>

</body>

</html>

效果图

 

  • 大小: 8.4 KB
分享到:
评论

相关推荐

    android实现自定义tab页

    在Android应用开发中,创建自定义的Tab页可以极大地提升用户体验和界面的个性化。本教程将深入探讨如何利用RadioButton实现非源生风格的Tab页,而不是依赖于原生的TabHost或ViewPager。以下是对这个主题的详细讲解:...

    正宗笔画输入法 破解版

    对于很多不想去记忆拼音或者五笔的朋友来说一款能简单操作的输入法是非常难寻找的,小编就找了许久终于找到这款“正宗笔画输入法破解版”。正宗笔画输入法破解版是使用简单、易学、易记的笔画输入法,形似手机笔画...

    正宗台湾十六张麻将3繁体v1.02内存修改器

    5. **确认效果**:在游戏中观察修改后的效果,确保改动正确无误。 然而,对于《正宗台湾十六张麻将3繁体v1.02》这样的网络游戏,使用内存修改器可能会引起诸多问题。首先,这可能违反游戏服务条款,导致账户被封禁...

    磁性窗体-绝对简单正宗

    【磁性窗体-绝对简单正宗】是一种编程技术,主要用于软件开发中,使得窗口程序能够像磁铁一样吸附在屏幕边缘或角落,提供用户更便捷的操作体验。这种特性常见于许多现代应用程序,尤其是那些需要多窗口并行工作的...

    正宗笔画输入法(时间破解)

    正宗笔画输入法 7.41 因正宗笔画输入法 7.41版 存在流氓行为 bihua.exe MD5: E9EC6FD9893FB251147E16A7D63A10DB 修改注册表键HKCU|Software|Microsoft|Internet Explorer|Main 注册表值: Start Page 值:...

    正宗笔画输入法

    正宗笔画输入法

    正宗笔画输入法.rar

    正宗笔画输入法通过简单易懂的笔画输入方式,为用户提供了另一种高效的汉字输入选择。对于那些希望提高汉字输入效率,特别是对笔画有基础了解的用户来说,这是一款非常实用的工具。配合压缩包内的说明文档,用户可以...

    起名正宗

    根据五格剖象法结合四柱, a.提供个人名分析,个人辅助起名; b.提供完备的公司、品牌、行业起名方案及行业名分析; c.提供每个汉字的解释; d.提供判断号码吉凶的功能;...e....f....g....完整版(=简装版+解释库)

    正宗笔画输入法(四合一)

    最简单的使用。任何人不用学就会电脑打字。 家庭必备。不懂拼音又不懂五笔的人士专用。 收录全部GBK汉字。右击查字典。 支持鼠标打字! 支持数字小键盘打字! 支持自定义键位! 超智能联想! 最人性化的设计!

    基于数据挖掘探析《外科正宗·肿疡主治方》用药规律.pdf

    在本文中,作者赵志恒、穆超超和张赫然通过数据挖掘技术,对《外科正宗·肿疡主治方》中的用药规律进行了深入分析,以期揭示陈实功治疗肿疡的用药特点和其学术思想。《外科正宗》是明代陈毓仁所编,作为中医外科方面...

    明高颖武经射学正宗上卷捷径门.doc

    总的来说,《武经射学正宗》中的《捷径门》阐述了射箭的正确方法和步骤,提倡通过系统的练习和理论学习来提高射箭技艺,而非盲目追求短期效果。这对现代射箭爱好者来说,仍具有很高的实践价值和指导意义。

    正则表达式最佳入门,正宗资料

    正则表达式(Regular Expression,简称Regex)是用于匹配字符串中模式的一种强大的工具,它广泛应用于数据验证、文本检索和替换等场景。正则表达式的基本概念是通过一系列符号和运算符来描述文本的模式,使得我们...

    正宗笔画输入法(诺基亚手机通用输入法)

    最简单的使用。任何人不用学就会电脑打字。 家庭必备。不懂拼音又不懂五笔的人士专用。 收录全部GBK汉字。右击查字典。 支持鼠标打字! 支持数字小键盘打字! 支持自定义键位! 超智能联想! 最人性化的设计!

    正宗笔画输入法 4.1最新版

    正宗笔画输入法4.1最新版是一款专为中文输入设计的软件,它基于汉字的笔画特性,让用户可以通过画出汉字的笔画来输入文字,尤其适合对拼音不熟悉或者初学汉字的用户。这款输入法的核心在于其笔画识别技术和高效的...

    西藏这几个著名的地方,正宗特产不容错过-6页.pdf

    西藏,这个神秘而美丽的高原之地,拥有众多独特的文化与特产,是旅行者寻找正宗纪念品的理想之地。在西藏,你可以找到一系列与当地自然环境和传统工艺紧密相关的特色商品,每一件都承载着浓厚的藏族文化和历史故事。...

    王记正宗麻辣烫配方.pdf

    王记正宗麻辣烫配方.pdf

    正宗五笔输入法

    安装过程相对简单,压缩包内的“zzbihua.exe”是安装程序,双击运行后按照提示操作即可完成安装。在使用过程中,用户可以通过设置选项调整输入法的界面风格、快捷键等个性化设置,以满足不同用户的习惯和喜好。 ...

    企业管理卜筮正宗.doc

    企业管理卜筮正宗.doc

    正宗的s2sh登录实例

    【正宗的s2sh登录实例】是一个典型的Java Web开发中的集成框架示例,它结合了Struts2、Spring和Hibernate这三个流行的开源框架。这个实例旨在为开发者提供一个基础的、可运行的登录功能,帮助他们快速理解和应用S2SH...

Global site tag (gtag.js) - Google Analytics