zoukankan      html  css  js  c++  java
  • JavaScript 点击切换菜单

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="Scripts/jquery-1.7.1.min.js"></script>
    <%--    <script src="Scripts/tab.js"></script>--%>
        <style type="text/css">
            #tab_nav {
                width: 300px;
                height: 14px;
            }
            #tab_nav li {
                height: 30px;
                width: 50px;
                list-style-type: none;
                float: left;
                text-align: center;
                line-height: 30px;
                border: 1px solid #e5e5e5;
                margin-right: 2px;
                cursor: pointer;
            }
            .current {
                background-color: #cccccc;
                color: red;
            }
            .tab_items {
                width: 400px;
                height: 300px;
                border: 1px solid #e5e5e5;
            }
            .off {
                display: none;
            }
        </style>
        
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <ul id="tab_nav">
                    <li class="current">新闻</li>
                    <li>生活</li>
                    <li>体育</li>
                    <li>抽奖</li>
                </ul>
                <div id="tabs">
                    <div class="tab_items">
                        新闻
                    </div>
                    <div class="tab_items off">
                        生活
                    </div>
                    <div class="tab_items off">
                        体育
                    </div>
                    <div class="tab_items off">
                        抽奖
                    </div>
                </div>
            </div>
        </form>
    </body>
    </html>
    <script type="text/javascript">
            var T = function(){
                this.init.apply(this, arguments);
            };
            T.prototype = {
                init:function () {
                    var uls = document.getElementById("tab_nav");
                    if (uls == null) return false;
                    var lis = uls.getElementsByTagName("li");
                    if (lis == null) return false;
                    for (var i = 0; i < lis.length; i++) {
                        lis[i].onclick = this.click(i);
                    }
                },
                click: function (n) {
                    return function() {
                        var tabs = document.getElementById("tabs");
                        if (tabs == null) return false;
                        var divs = tabs.getElementsByTagName("div");
                        if (divs == null) return false;
                        for (var m = 0; m < divs.length; m++) {
                            if (n == m) {
                                divs[m].className = "tab_items";
                            } else {
                                divs[m].className = "tab_items off";
                            }
                        }
                    };
                }
            };
            $(function() {
                T.prototype.init();
            });
        </script>
    
    
    
    
    
    将来的你,一定会感谢现在努力的自己!
  • 相关阅读:
    【Spring Security学习之一】Spring Security入门
    【OAuth 2.0学习之一】OAuth 2.0入门
    【JWT学习之二】JWT实现单点登录
    【JWT学习之一】JWT入门
    【CAS学习之三】CAS客户端验证
    【CAS学习之二】部署CAS服务端
    【CAS学习之一】CAS入门
    ES 聚合分类(text字段)语句报错
    LeNet网络在fashion MNIST数据集上的实现
    动手深度学习 pytorch
  • 原文地址:https://www.cnblogs.com/GreatPerson/p/7071220.html
Copyright © 2011-2022 走看看