tab菜单的简单实现

最新推荐文章于 2021-06-22 17:20:17 发布

宅男小何

最新推荐文章于 2021-06-22 17:20:17 发布

阅读量1.1k

点赞数

文章标签： border javascript float html function ajax

本文链接：https://blog.csdn.net/lazy_p/article/details/6220045

版权

利用css+javascript简单的实现tab菜单的功能！其中主要是应用了事件onmouseover，当鼠标移上一个菜单项的时候触发onmouseover 事件，然后通过js的style对象改变相应的显示。我这里只是简单的将内容区域显示为菜单的名称，如果是实际应用中应该是通过ajax取得相应菜单需要显示的内容，然后同js改变内容区域的显示内容（document.getElementById("contentId").innerHTML="content"）。

下面我写的一个tab菜单的demo：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <title>tab菜单</title>
        <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">            body {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 15px;
            }
            
            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            
            ul ol {
                float: left;
                display: block;
                text-align: center;
                background-color: #CCC;
                border: 1px #CCC solid;
                margin: 0 0 0 5px;
                padding: 0px;
                width: 60px;
            }
            
            ul ol#tab {
                margin-bottom: 0px;
                border-bottom: 0px;
                background-color: #FFF;
            }
            
            div#content {
                clear: both;
                border-top: 0px;
                border-left: 1px #CCC solid;
                border-right: 1px #CCC solid;
                border-bottom: 1px #CCC solid;
                margin: 0px;
                padding: 0;
                width: 261px;
                height: 150px;
            }
        </style>
        <mce:script type="text/javascript"></mce:script>
    </head>
    <body>
        <ul>
            <ol style="margin-left:0px;" mce_style="margin-left:0px;" οnmοuseοver="tabonmouseover(this);" id="tab">
                新闻
            </ol>
            <ol οnmοuseοver="tabonmouseover(this);">
                手机
            </ol>
            <ol οnmοuseοver="tabonmouseover(this);">
                Blog
            </ol>
            <ol οnmοuseοver="tabonmouseover(this);">
                篮球
            </ol>
        </ul>
        <div id="content">
            新闻内容
        </div>
    </body>
</html>

宅男小何

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
tab菜单的简单实现

利用css+javascript简单的实现tab菜单的功能！其中主要是应用了事件onmouseover，当鼠标移上一个菜单项的时候触发onmouseover事件，然后通过js的style对象改变相应的显示。我这里只是简单的将内容区域显示为菜单的名称，如果是实际应用中应该是通过ajax取得相应菜单需要显示的内容，然后同js改变内容区域的显示内容（document.getElementById("contentId").innerHTML="content"）。下面我写的一个tab菜单的demo
复制链接

扫一扫