个人中心
gpt4 book ai didi

javascript - 如何在 JQuery 中更改 li 元素上的事件类并在单击 li 元素时将用户重定向到指定页面？

转载 作者：太空宇宙 更新时间：2023-11-04 01:27:31 25 4
gpt4 key购买 nike

我的脚本标签中有以下内容。但是，每当我单击 on test.php 或 test2.php li 链接时，我都不会重定向到相应的页面。但是，根据单击的链接，事件类从 index.php 文件更改为 test.php 或 test2.php 文件，但我没有被定向到该页面。我尝试了以下链接中的解决方案，但现在它们产生了我想要的结果，即将我重定向到单击的页面并将事件类更新为 li 元素。

How to change active class while click to another link in bootstrap use jquery?

Active link after click

每当我取消注释这一行 e.preventDefault() 时，我都可以导航到已单击的链接，但事件类不会更新到单击了 li 元素，但是当评论该行时，我无法导航到单击的页面，而是在单击的 li 元素上更新事件类。

<div class="menu">
    <ul class="list">
        <li class="header">MAIN NAVIGATION</li>
        <li class="active">
            <a href="index.php">
                <i class="material-icons">home</i>
                <span>Home</span>
            </a>
        </li>
        <li class="">
            <a href="test.php">
                <i class="material-icons">group</i>
                <span>Test</span>
            </a>
        </li>
        <li class="">
            <a href="test2.php">
                <i class="material-icons">people</i>
                <span>Test2</span>
            </a>
        </li>
    </ul>
 </div>

脚本代码:

$(document).ready(function () {
    $('.menu .list a').click(function(e) {

        $('.menu li.active').removeClass('active');

        var $parent = $(this).parent();
        $parent.addClass('active');
        e.preventDefault();
    });
});

test.php的内容如下:

<body class="theme-red">
    <nav class="navbar">
        <?php include_once('navbar.html'); ?>
    </nav>
    <section>
        <aside id="leftsidebar" class="sidebar">
            <?php include_once('left-side-bar.html');?>
        </aside>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row clearfix">
                <table id="tbl-users" class="table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                        </tr>
                    </tfoot>
                    <tbody>
                    <?php
                        $accounts = get_details();
                        foreach($accounts as $acc){
                    ?>
                        <tr>
                            <td><?php echo $acc['id']; ?></td>
                            <td><?php echo $acc['name']; ?></td>
                        </tr>
                    <?php
                        }
                    ?>
                    </tbody>
                </table>
            </div>
        </div>
    </section>
</body>

最佳答案

Why is the problem arising?

The problem arises that, when you use e.preventDefault() on click of anchor tag, the default behaviour is to redirect the page and that's why the page doesn't load but the active class gets added. But when you don't use e.preventDefault(), the page redirects immediately and the change you did happen but before it was redirected and not for the new page(which could be redirected current page or some other page), that's why you can't see the class active added to it.

.

How to fix the problem?

Well, there are a couple of ways to go about it. I'd say that from the test.php or test2.php return a value, which you can validate against the javascript with if-else conditions, if the value matches you make that li class as active.

以下是您需要进行的更改:

在您超链接的每个页面上添加一个跨度，即 test.php、test2.php 等。having text the same as your hyperlink在 anchor 标记中，为 test.php 添加一个跨度为:

<span id="curpage" style="display:none;">test.php</span>

然后，在 body 标签的末尾添加一个脚本(您可以将此脚本添加到一个单独的文件中，并使用 <?php include(".."); ?> 将其包含在所有 php 文件中:

$('a[href=\"' + $("#curpage").text() + '\"]').parent().addClass("active");

Here's a sample code, that you can try and implement. Make 2 files in the same directory named as a.html having the code:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <span id="curpage" style="display:none;">a.html</span>
  <div class="menu">
  <li><a href="b.html">1</a></li>
  <li><a href="a.html">2</a></li>
</div>
<script>
  $('a[href=\"' + $("#curpage").text() + '\"]').parent().css("color","red");
</script>
</body>
</html>

And b.html having the code:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <span id="curpage" style="display:none;">b.html</span>
  <div class="menu">
  <li><a href="b.html">1</a></li>
  <li><a href="a.html">2</a></li>
</div>
<script>
  $('a[href=\"' + $("#curpage").text() + '\"]').parent().css("color","red");
  </script>
  </body>
</html>

And now when you change the pages by clicking the link, you can see how the color of bullet changes.

关于javascript - 如何在 JQuery 中更改 li 元素上的事件类并在单击 li 元素时将用户重定向到指定页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47776858/

25 4 0
文章推荐： html - Firefox 中的巨大背景图像至少在调整大小后消失
文章推荐： python - Pandas:使用 groupby 对象进行循环的有效方法
文章推荐： python - 是否可以像 unittest 一样在 Python 脚本中的 testtools 框架下运行测试？
文章推荐： html - Bootstrap- 为什么我的 div 在移动设备上不跳转到下一行？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com