jQuery

1 点击按钮跳到指定链接地址的时候:

 <div class="col-md-6" style="margin-top: 80px">
                        <label class="sr-only" for="add_item">add</label>
                        <input class="btn btn-success" id="add_item" type="button" value="添加商品">
                        <label class="sr-only" for="add_top">add</label>
                        <input class="btn btn-success" id="add_top" type="button" value="添加排行榜">
                        <label class="sr-only" for="add_achieve">add</label>
                        <input class="btn btn-success" id="add_achieve" type="button" value="添加成就">
                    </div>
        $("#add_item").on('click',function(){
            window.location.href = "/game/nvidia/item/modify.action";
        });
        $("#add_achieve").on('click',function(){
            window.location.href = "/game/nvidia/achieve/modify.action";
        });
        $("#add_top").on('click',function(){
            window.location.href = "/game/nvidia/top/modify.action";
        });

整个的代码:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">

    <link rel="stylesheet" href="http://static.qiyi.com/qui/0.0.1/css/qui.css">
    <!-- 1)加入QUI的css end-->
    <link href="http://static.qiyi.com/css/common/app_store_css/app_store.css" rel="stylesheet" type="text/css"/>
    <link type="text/css" rel="stylesheet" href="http://static.qiyi.com/css/common/sellCenter_css/pikaday.css"/>

    <link type="text/css" rel="stylesheet" href="/css-src/compatible.css"/>

    <%@ include file="/WEB-INF/include/bootstrap.jsp" %>
    <style rel="stylesheet" type="text/css">
        body {
            font-family: "Microsoft YaHei", Verdana, Geneva, sans-serif;
        }
        .selected {
            color : black;
        }
    </style>
    <title>Nvidia信息统计</title>


    <script src="//cdn.bootcss.com/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="//cdn.bootcss.com/datatables/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/datatables/1.10.12/css/dataTables.bootstrap.min.css">
</head>
<body>
<%@ include file="/WEB-INF/include/top.jsp" %>
<div class=".container-fluid box1000">
    <%@ include file="/WEB-INF/include/gamebox-top.jsp" %>
    <%@ include file="/WEB-INF/include/nvidia-operation-top.jsp" %>

    <div class="row">
        <div class="col-md-12">
            <div class="clearfix"></div>
            <div style="margin-top: 10px">
                <form class="form" id="list_form" method="post" action="/game/nvidia/statistics/list.action">
                    <div class="form-group col-md-3">
                        <label class="control-label">游戏</label>
                        <input type="text" class="form-control" name="app" placeholder="游戏ID或名称" value="${app }">
                    </div>
                    <div class="form-group col-md-3">
                        <label class="control-label">上线状态</label>
                        <select name="online_status" class="form-control">
                            <option value="0">全部</option>
                            <c:forEach var="tmp" items="${onlineStatusMap}">
                                <option value="${tmp.id}" <c:if
                                        test="${param.online_status eq tmp.id}">selected</c:if>>${tmp.name} </option>
                            </c:forEach>
                        </select>
                    </div>
                    <div class="form-group col-md-3" style="margin-top:30px;">
                        <label class="sr-only" for="search_button">search</label>
                        <input class="btn btn-primary" id="search_button" type="submit" value="查询">
                    </div>
                </form>
            </div>

            <div class="col-md-12">
                <div style="text-align: center">
                    <div class="col-md-6">
                        <table class="table" style=" 500px;">
                            <tbody>
                            <tr>
                                <th>含商品的游戏总数量:</th>
                                <td>${gameCountWithItem}</td>
                            </tr>
                            <tr>
                                <th>含排行榜的游戏总数量:</th>
                                <td>${gameCountWithInnerTop}</td>
                            </tr>
                            <tr>
                                <th>含成就的游戏总数量:</th>
                                <td >${gameCountWithAchieve}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-6" style="margin-top: 80px">
                        <label class="sr-only" for="add_item">add</label>
                        <input class="btn btn-success" id="add_item" type="button" value="添加商品">
                        <label class="sr-only" for="add_top">add</label>
                        <input class="btn btn-success" id="add_top" type="button" value="添加排行榜">
                        <label class="sr-only" for="add_achieve">add</label>
                        <input class="btn btn-success" id="add_achieve" type="button" value="添加成就">
                    </div>

                  </div>
            </div>

            <div style="text-align: center">
                <table class="table table-bordered order_table">
                    <thead>
                    <tr>
                        <th  style="text-align: center">游戏ID</th>
                        <th  style="text-align: center">游戏名称</th>
                        <th  style="text-align: center">商品数量</th>
                        <th  style="text-align: center">排行榜数量</th>
                        <th  style="text-align: center">成就数量</th>
                        <th  style="text-align: center">上线状态</th>
                    </tr>
                    </thead>
                    <tbody id="i-datalist" data-query-name="App">
                    <%@ include file="/WEB-INF/views/gamebox/nvidia/statistics_page.jsp" %>
                    </tbody>
                </table>
            </div>
        </div>
        <nav style="text-align: center">
            <ul class="pagination" id="pagination"></ul>
        </nav>
    </div>

</div>
<%@ include file="/WEB-INF/include/foot.jsp" %>
<script>

    // 菜单选中
    $(function () {
        $("#nvidia").addClass("active");
        $("#game-statistics").addClass("active");
        // 表单排序
        $(".order_table").DataTable({
            "searching": false,
            "paging": false,
            "info":false,
            "columnDefs": [
                {
                    "orderable": false,
                    "targets": [0, 1, 5]
                }
            ]
        });

        $("#add_item").on('click',function(){
            window.location.href = "/game/nvidia/item/modify.action";
        });
        $("#add_achieve").on('click',function(){
            window.location.href = "/game/nvidia/achieve/modify.action";
        });
        $("#add_top").on('click',function(){
            window.location.href = "/game/nvidia/top/modify.action";
        });


    });
</script>
</body>

</html>
View Code
原文地址:https://www.cnblogs.com/noaman/p/6604818.html