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>
    
    
    
    
    
    将来的你,一定会感谢现在努力的自己!
  • 相关阅读:
    网络七层
    微信小程序开发工具 常用快捷键
    BZOJ 1026 windy数 (数位DP)
    BZOJ 1026 windy数 (数位DP)
    CodeForces 55D Beautiful numbers (SPOJ JZPEXT 数位DP)
    CodeForces 55D Beautiful numbers (SPOJ JZPEXT 数位DP)
    HDU 3709 Balanced Number (数位DP)
    HDU 3709 Balanced Number (数位DP)
    UVA 11361 Investigating Div-Sum Property (数位DP)
    UVA 11361 Investigating Div-Sum Property (数位DP)
  • 原文地址:https://www.cnblogs.com/GreatPerson/p/7071220.html
Copyright © 2011-2022 走看看