jquery中show(),先显示,后又立即消失,麻烦帮我看看

发布网友发布时间：2022-04-23 09:24

我来回答

共2个回答

热心网友时间：2022-04-23 10:53

我把你的html js的位置什么的稍微改了下：

jquery是我重新引入的

你的问题

第一我把绑定方法在在

$(function(){

// bind。。。

});这中间了，等dom加载后再绑定；

第二：如果a标签不跳转作为点击事件请加上： <a href="javascript:void(0);"class="view">查看</a>

第三：绑定方法中阻止冒泡：event.stopPropagation();

其中 2 3做的是一样的事情。有不清楚的地方可追问我。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            table,
            th,
            td {
                border: solid thin red;
                border-collapse: collapse;
            }

            table {
                top: 200px;
                left: 200px;
                width: 500px;
                height: 200px;
                position: absolute;
                left: 50%;
                margin-left: -250px;
                text-align: center;
            }

            #div1 {
                width: 500px;
                height: 150px;
                border: solid thin red;
                position: absolute;
                left: 50%;
                /*margin-left: 0px;*/
                top: 20px;
                display: none;
            }

            div p {
                border-bottom: solid thin red;
            }
        </style>

        <script src="js/jquery.js"></script>
        <script>
        $(function(){
           $('.view').click(function(event) {
                $('#div1').show();
                event.stopPropagation();
            });
        });

        </script>

        <body>
            <table id="table1">
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>职位</th>
                    <th>工资</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>成龙</td>
                    <td>45</td>
                    <td>演员</td>
                    <td>50k</td>
                    <td>
                        <a href="javascript:void(0);"class="view">查看</a>
                        <a href="">删除</a>
                        <a href="">修改</a>
                    </td>
                </tr>
                <tr>
                    <td>马云</td>
                    <td>50</td>
                    <td>总裁</td>
                    <td>1亿</td>
                    <td>
                        <a href="" class="view">查看</a>
                        <a href="">删除</a>
                        <a href="">修改</a>
                    </td>
                </tr>
            </table>
            <div id="div1">
                <p><strong>姓名:</strong><span></span></p>
                <p><strong>年龄:</strong><span></span></p>
                <p><strong>职业:</strong><span></span></p>
                <p><strong>工资:</strong><span></span></p>
            </div>

        </body>

</html>

热心网友时间：2022-04-23 12:11

这样试试看，如果能够解决问题的话，原因就是a标签点击后页面跳转导致页面刷新