`
ry.china
  • 浏览: 139812 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

一个多行tab示例

电子政务XHTML教育HTML 
阅读更多

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title></title>
</head><body>

<style>
.dgvh{ height:30px}
.dgv0{ width:64px; height:22px; border:1px solid #CBCBCB;color:#0066CC; text-align:center; line-height:22px; float:left; margin:1px 5px 5px 0px; background:#FFF}
.dgv1{ width:64px; height:29px; border:1px solid #CBCBCB;color:#0066CC; border-bottom:0px;text-align:center; line-height:22px; float:left; margin:0px 5px 0px 0px; z-index:10px; background:#FFF; position:relative; top:1px}
.dgv2{ width:50px; height:22px; border:1px solid #CBCBCB;color:#0066CC; text-align:center; line-height:22px; float:left; margin:1px 5px 5px 0px; background:#FFF}
.dgv3{ width:50px; height:29px; border:1px solid #CBCBCB;color:#0066CC; border-bottom:0px;text-align:center; line-height:22px; float:left; margin:0px 5px 0px 0px; z-index:10px; background:#FFF; position:relative; top:1px}
.sdgv{margin:0px 0px 5px 0px; width:259px; background:#FFF;border:1px solid #CBCBCB; padding:9px; line-height:18px}
.sdgv a{color:#747474; white-space:nowrap}
</style>
<script>
function showKind(v)
{
    for(var i=0;i<12;i++)
    {
        document.getElementById("dgv"+i).className="dgv0";
        document.getElementById("sdgv"+i).style.display="none";
    }
    for(var i=12;i<17;i++)
    {
        document.getElementById("dgv"+i).className="dgv2";
        document.getElementById("sdgv"+i).style.display="none";
    }
    document.getElementById("dgv"+v).className=(v>11?"dgv3":"dgv1");
    document.getElementById("sdgv"+v).style.display="";
}
var timeID=null;
function screenKind()
{   
    clearTimeout(timeID);
    timeID=setTimeout("hidKind();",5000)
}
function hidKind()
{
    for(var i=0;i<12;i++)
    {
        document.getElementById("dgv"+i).className="dgv0";
        document.getElementById("sdgv"+i).style.display="none";
    }
    for(var i=12;i<17;i++)
    {
        document.getElementById("dgv"+i).className="dgv2";
        document.getElementById("sdgv"+i).style.display="none";
    }
}
</script>
<div style="border: 1px solid rgb(135, 189, 107); padding: 0px 0px 5px 9px; background: rgb(245, 255, 230) none repeat scroll 0% 0%; width: 289px; height: auto; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; clear: both;" onmouseout="screenKind()">
<div style="line-height: 30px; height: 30px;"><div style="width: 270px; height: 20px; float: left; padding-left: 10px; color: rgb(98, 140, 42);"><b>解决方案速查</b>(共有 15040 个方案)</div></div>
<div>
<div class="dgvh">
<div id="dgv0" class="dgv0" onmouseover="showKind(0)">基础软件</div>
<div id="dgv1" class="dgv0" onmouseover="showKind(1)">安全保密</div>
<div id="dgv2" class="dgv0" onmouseover="showKind(2)">管理软件</div>
<div id="dgv3" class="dgv0" onmouseover="showKind(3)">办公软件</div>
</div>
<div id="sdgv0" class="sdgv" style="display: none;">
<a href="trade-s8421376" target="_blank">操作系统</a>
</div>
<div id="sdgv1" class="sdgv" style="display: none;">
<a href="trade-s34078720" target="_blank">防伪软件</a>
</div>
<div id="sdgv2" class="sdgv" style="display: none;">
<a href="trade-s42729472" target="_blank">一卡通</a>
</div>
<div id="sdgv3" class="sdgv" style="display: none;">
<a href="trade-s50692096" target="_blank">翻译词典</a>
</div>
<div class="dgvh">
<div id="dgv4" class="dgv0" onmouseover="showKind(4)">软件开发</div>
<div id="dgv5" class="dgv0" onmouseover="showKind(5)">系统网络</div>
<div id="dgv6" class="dgv0" onmouseover="showKind(6)">图形媒体</div>
<div id="dgv7" class="dgv0" onmouseover="showKind(7)">辅助设计</div>
</div>
<div id="sdgv4" class="sdgv" style="display: none;">
<a href="trade-s17498112" target="_blank">其他开发工具</a>
</div>
<div id="sdgv5" class="sdgv" style="display: none;">
<a href="trade-s26083328" target="_blank">其他工具</a>
</div>
<div id="sdgv6" class="sdgv" style="display: none;">
<a href="trade-s59342848" target="_blank">电子地图</a>
</div>
<div id="sdgv7" class="sdgv" style="display: none;">
<a href="trade-s67272704" target="_blank">辅助工艺CAPP</a>
</div>
<div class="dgvh">
<div id="dgv8" class="dgv0" onmouseover="showKind(8)">行业专用</div>
<div id="dgv9" class="dgv0" onmouseover="showKind(9)">教育教学</div>
<div id="dgv10" class="dgv0" onmouseover="showKind(10)">电子政务</div>
<div id="dgv11" class="dgv0" onmouseover="showKind(11)">其他软件</div>
</div>
<div id="sdgv8" class="sdgv" style="display: none;">
<a href="trade-s93552640" target="_blank">农林畜渔</a>
</div>
<div id="sdgv9" class="sdgv" style="display: none;">
<a href="trade-s84475904" target="_blank">科学软件</a>
</div>
<div id="sdgv10" class="sdgv" style="display: none;">
<a href="trade-s76349440" target="_blank">农村管理</a>
</div>
<div id="sdgv11" class="sdgv" style="display: none;">
<a href="trade-s101318656" target="_blank">人像证卡</a>
</div>
<div class="dgvh">
<div id="dgv12" class="dgv2" onmouseover="showKind(12)">接入</div>
<div id="dgv13" class="dgv2" onmouseover="showKind(13)">通信</div>
<div id="dgv14" class="dgv2" onmouseover="showKind(14)">网络</div>
<div id="dgv15" class="dgv2" onmouseover="showKind(15)">存储</div>
<div id="dgv16" class="dgv2" onmouseover="showKind(16)" style="width: 49px;">IT服务</div>
</div>
<div id="sdgv12" class="sdgv" style="display: none;">
<a href="trade-k8912896" target="_blank">综合接入技术</a>
</div>
<div id="sdgv13" class="sdgv" style="display: none;">
<a href="trade-k17301504" target="_blank">其他通信技术</a>
</div>
<div id="sdgv14" class="sdgv" style="display: none;">
<a href="trade-k26050560" target="_blank">其他网络技术</a>
</div>
<div id="sdgv15" class="sdgv" style="display: none;">
<a href="trade-k34078720" target="_blank">其他存储技术</a>
</div>
<div id="sdgv16" class="sdgv" style="display: none;">
<a href="trade-k42205184" target="_blank">其他IT服务</a>
</div>
</div></div>

</center></body></html>

  • 大小: 4.6 KB
分享到：
| java断点下载
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Flex中实现多行tab的源代码

    本示例将详细讲解如何在Flex中创建多行Tab，并提供相关源代码。 首先，让我们了解Flex中的TabNavigator组件。TabNavigator是Flex提供的一个容器，它可以容纳多个子视图，每个子视图对应一个Tab。用户可以通过点击...

    tab控件使用小例子

    在提供的"tabtest"文件中，可能包含了一个简单的示例项目，包括源代码和资源文件。通过分析和运行这个示例，你可以直观地看到如何将上述理论应用到实践中。这将帮助你理解每个步骤的细节，并加深对Windows SDK编程的...

    VC基本控件示例代码

    本文将深入探讨VC基本控件及其在示例代码中的应用，包括编辑框、按钮、树控件、列表控件以及TAB控件。 1. **编辑框（Edit Control）**：编辑框是最常见的控件之一，用于接收用户输入文本。VC++提供了两种类型的编辑...

    安卓Android源码——小插件tab标签大合集.zip

    例如，平板上可能显示多行Tab，手机上则可能折叠成下拉菜单。 10. **第三方库**：除了官方的TabLayout，还有许多第三方库提供了更丰富的Tab实现，如SlideTabStrip、SmartTabLayout等，它们提供了更多的定制选项和...

    android小插件tab标签大合集.rar

    6. **Third-Party Libraries**：除了官方提供的组件外，还有一些第三方库如TabLayout-MVP、SmartTabLayout、BottomBar等，它们提供了更多自定义选项和扩展功能，如动画效果、多行Tab、底部导航栏等。 7. **动态添加...

    SQL语句行数据拆成多行及多行数据合并成一行的方法.docx

    - 创建一个表 `tb` 并插入示例数据。 - 定义一个自定义函数 `f_str`，该函数接收一个 `id` 参数。 - 在函数内部，使用 `ISNULL` 来确保首次拼接时不会出现逗号。 - 返回合并后的字符串。 以上方法覆盖了 SQL Server...

    （0156）-iOS／iPhone／iPAD／iPod源代码－选项卡（Tab Bar）-Expandable TabBar

    本资源“（0156）-iOS／iPhone／iPAD／iPod源代码－选项卡（Tab Bar）-Expandable TabBar”提供了一个实现可扩展的TabBar的示例，它允许用户在需要时查看并访问更多的选项。这种设计可以解决当TabBar选项过多时，...

    IOS应用源码——位于顶部的黑酷tab view视图demo.zip

    这个“IOS应用源码——位于顶部的黑酷tab view视图demo”就是一个很好的示例，展示了如何实现这种效果。通过分析这个Demo，我们可以学习到以下关键知识点： 1. 自定义UI：这个项目可能采用了自定义的TabBar控件，而...

    解决python多行注释引发缩进错误的问题

    这是一个多行注释 ''' print("hello world") ``` 如果多行注释没有正确的缩进，比如： ```python def some_function(): print("hello world") ''' 这是一个不正确的多行注释 由于缺少缩进，它会引发一个...

    SDK TAB的使用

    - 主对话框配置：使用`IDD_MAINDLGDIALOGEX`定义了一个主对话框，其尺寸为247×161像素，其中包含一个TabControl组件，其ID为`IDC_TAB1`。 - 分页对话框配置：定义了三个子对话框(`IDD_PAGE1`, `IDD_PAGE2`, `IDD_...

    C++MFC教程

    4、窗口句柄：说到消息就不能不说窗口句柄，系统通过窗口句柄来在整个系统中唯一标识一个窗口，发送一个消息时必须指定一个窗口句柄表明该消息由那个窗口接收。而每个窗口都会有自己的窗口过程，所以用户的输入就会...

    Oracle 开发DBA SQL编写规范

    - 使用两个空格或一个制表符(`Tab`)作为缩进单位。 - 当一行超过80个字符时，下一行需基于列对齐原则进行缩进。 - 示例： ```sql select col1, col2, col3, col4, col5 from tab1 where col6 = 'value'; ``` ...

    在textarea输入Tab

    下面是一个简单的示例，演示了如何在`&lt;textarea&gt;`中使用JavaScript来处理Tab键，并将其替换为指定数量的空格： ```javascript document.querySelector('textarea').addEventListener('keydown', function (e) { if...

    C#编码规范C#编码规范

    **【规范2-2】** 被上一个层次控制的部分在上一个层次的基础上向右缩进一个跳格单位。 **【规范2-3】** 不同类的定义之间空两行，方法的定义之间空一行，功能上具有明显区别的同一方法内的代码块之间空一行。 - ...

    javascript实现textarea中tab键的缩排处理方法

    然而，HTML的textarea元素默认并不支持按下Tab键时自动缩进的功能，而是将焦点切换到下一个表单元素。为了解决这个问题，我们可以使用JavaScript来实现textarea中的Tab键缩进处理。 首先，我们需要监听textarea元素...

    HTML基本标签和代码示例

    `&lt;div&gt;`是一个块级元素，常用于组织和分组内容，可以看作是一个逻辑容器，方便应用CSS样式和JavaScript操作。而`&lt;span&gt;`是一个内联元素，通常用于对文本进行精细化控制，如设置特定部分的样式。与`&lt;div&gt;`不同，`...

    winform界面跳转

    对于“Table页面”效果，可以考虑使用TabControl控件，它允许在一个窗体中展示多个“Tab页”，每个Tab页相当于一个独立的工作表。 1. **TabControl的使用**： - 添加TabControl到你的窗体中，可以通过属性设置调整...

    CheckStyle结果分析

    // 如果同一个文件中只有 ClassA 被使用，则保留此导入 ``` --- ##### 18. 未使用的导入 **提示**: Unused import - java.util.List. **说明**: 导入了但未使用的类。 **解决方法**: 去除未使用的导入。 **...

    多行：多行，从函数调用和定义到数组和映射文字的各种语言，包括多种语言

    以下是一个多行的映射文字示例： ```elisp (defvar my-alist '((name . "Alice") (age . 30) (city . "New York"))) ``` 这里，`my-alist`是一个键值对列表，每个元素都由一对（key . value）组成。 此外，关于...

    C编程规范,非常好的文档

    - **规则**：当一个语句长度超过80字符时，应该适当地拆分为多行，并且确保操作符位于新行的开头。 - **示例**： ```c variable = long_expression + another_long_expression * operation; ``` - **错误示例*...

Magicbox
Global site tag (gtag.js) - Google Analytics