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>


 






 







            

            
posted @ 
2017-06-23 18:10 
字里行间 
阅读(219) 
评论(0) 
编辑 
收藏 
举报