Javascript 如何更改JQuery中li元素的活动类，并在单击li元素时将用户重定向到指定页面？_Javascript_Jquery_Html_Css

Javascript 如何更改JQuery中li元素的活动类，并在单击li元素时将用户重定向到指定页面？

javascript jquery html css

Javascript 如何更改JQuery中li元素的活动类，并在单击li元素时将用户重定向到指定页面？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我的脚本标签中有以下内容。但是，每当我单击test.php或test2.php li链接时，我都不会被重定向到相应的页面。但是，活动类从index.php文件更改为test.php或test2.php文件，具体取决于单击了哪个链接，但我没有直接指向页面。我试图在下面的链接中找到解决方案，但现在其中的一个产生了我想要的结果，即将我重定向到单击的页面，并将活动类更新为li元素每当我取消注释这一行e.preventDefault（）时，我都能够导航到已单击但活动类未更新到的链接 li元素单击了

我的脚本标签中有以下内容。但是，每当我单击test.php或test2.php li链接时，我都不会被重定向到相应的页面。但是，活动类从index.php文件更改为test.php或test2.php文件，具体取决于单击了哪个链接，但我没有直接指向页面。我试图在下面的链接中找到解决方案，但现在其中的一个产生了我想要的结果，即将我重定向到单击的页面，并将活动类更新为li元素

每当我取消注释这一行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>

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>


身份证件
名称
身份证件
名称

您应该知道

e.preventDefault（）

将阻止调用它的对象的默认行为（在本例中为重定向）。因此，您正在阻止应用程序重定向到您指定的

href

您可以按如下方式更改功能代码：

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

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

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

        //Here is needed change
        location.href = $(this).attr('href');
    });
});

var current_page = $("#page-name").data("page");

编辑1: 因此，您可以使用这种方法：

1）为每个

li

标记指定类名

2）在重定向和页面加载后，发送必须具有

活动类的类名
3） 从url
读取传递的类名，并在li
标记中添加/删除
因此，您的html
代码如下所示：
<div class="menu">
    <ul class="list">
        <li class="header">MAIN NAVIGATION</li>
        <li class="home active">
            <a href="index.php">
                <i class="material-icons">home</i>
                <span>Home</span>
            </a>
        </li>
        <li class="group">
            <a href="test.php">
                <i class="material-icons">group</i>
                <span>Test</span>
            </a>
        </li>
        <li class="people">
            <a href="test2.php">
                <i class="material-icons">people</i>
                <span>Test2</span>
            </a>
        </li>
    </ul>
 </div>

您应该知道e.preventDefault（）
将阻止调用它的对象的默认行为（在本例中为重定向）。因此，您正在阻止应用程序重定向到您指定的href

您可以按如下方式更改功能代码：
$(document).ready(function () {
    $('.menu .list a').click(function(e) {

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

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

        //Here is needed change
        location.href = $(this).attr('href');
    });
});

var current_page = $("#page-name").data("page");

编辑1:
因此，您可以使用这种方法：
1） 为每个li
标记指定类名
2） 在重定向和页面加载后，发送必须具有活动类的类名
3） 从url
读取传递的类名，并在li
标记中添加/删除
因此，您的html
代码如下所示：
<div class="menu">
    <ul class="list">
        <li class="header">MAIN NAVIGATION</li>
        <li class="home active">
            <a href="index.php">
                <i class="material-icons">home</i>
                <span>Home</span>
            </a>
        </li>
        <li class="group">
            <a href="test.php">
                <i class="material-icons">group</i>
                <span>Test</span>
            </a>
        </li>
        <li class="people">
            <a href="test2.php">
                <i class="material-icons">people</i>
                <span>Test2</span>
            </a>
        </li>
    </ul>
 </div>

为什么会出现问题？
出现的问题是，在单击时使用e.preventDefault（）
锚定标记，默认行为是重定向页面
为什么页面不加载，但添加了活动类。但是什么时候
如果不使用e.preventDefault（）
，则页面将立即重定向
而您所做的更改确实发生了，但在它被重定向之前并没有发生
对于新页面（可以重定向到当前页面或其他页面），这就是为什么无法看到添加到的活动类的原因
它

如何解决问题？
嗯，有两种方法可以解决这个问题。我会从一开始就这么说
test.php或test2.php返回一个值，您可以对该值进行验证
如果值与您所做的匹配，则使用if-else条件的javascript
那个李班很活跃
以下是您需要进行的更改：
在每个有超链接的页面上添加一个跨度，即test.php、test2.php等。锚定标记中的文本与超链接相同，因此对于test.php，添加一个跨度为：
<span id="curpage" style="display:none;">test.php</span>

下面是一个示例代码，您可以尝试并实现它。在中创建2个文件
名为a.html的同一目录，其代码为：
<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>

<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>


a、 html


$（'a[href=\“'+$（“\\”）.text（）+'\“]'））.parent（）.css（“颜色”、“红色”）；

以及具有以下代码的b.html：
<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>

<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>


b、 html


$（'a[href=\“'+$（“\\”）.text（）+'\“]'））.parent（）.css（“颜色”、“红色”）；

现在，当您通过单击链接更改页面时，您可以看到
子弹的颜色如何变化
为什么会出现问题？
出现的问题是，在单击时使用e.preventDefault（）
锚定标记，默认行为是重定向页面
为什么页面不加载，但添加了活动类。但是什么时候
如果不使用e.preventDefault（）
，则页面将立即重定向
而您所做的更改确实发生了，但在它被重定向之前并没有发生
对于新页面（可以重定向到当前页面或其他页面），这就是为什么无法看到添加到的活动类的原因
它

如何解决问题？
嗯，有两种方法可以解决这个问题。我会从一开始就这么说
test.php或test2.php返回一个值，您可以对该值进行验证
如果值与您所做的匹配，则使用if-else条件的javascript
那个李班很活跃
以下是您需要进行的更改：
在您要访问的每个页面上添加一个跨距