Question

我尝试了一些jquery并且遇到了一个很大的问题，我一直试图用google解决这个问题，但不知道如何解决这个问题。

我使用带有简单php脚本的index.php页面从db中检索我的内容，我使用的链接如：index.php?title=abou t（示例）。我找到了一个小的jquery脚本，它为你点击的<li>添加了一个活动的类，如果url是（#about），这个方法很有效，它会保持类的活动，直到点击其他链接。但如果它的网址像＆＃34; index.php?title=about＆＃34;它删除了活动类。

这是我的css / html和jquery，我的问题是如何在点击按钮时保持按钮处于活动状态。

    <style type="text/css"> 
    .nav li { list-style: none; cursor:pointer; }
    .nav li a { display: block; width: 279px; height: 30px;}
    .nav-home { background: url(img/home.png); width: 279px; height: 27px; }
    .nav-home.active, .nav-home:hover { background: url(img/home_1.png); width: 279px;          height: 27px;}
    .nav-video { background: url(img/video.png); width: 279px; height: 27px; }
    .nav-video.active, .nav-video:hover { background: url(img/video_1.png); width: 279px; height: 27px;}
    .nav-contact { background: url(img/contact.png); width: 279px; height: 27px; }
    .nav-contact.active, .nav-contact:hover { background: url(img/contact_1.png); width: 279px; height: 27px;}
    </style>

html和jquery：

    <ul class="nav">
    <li class="nav-home"><a href="index.php?title=home"></a></li>
    <li class="nav-video"><a href="index.php?title=video"></a></li>
    <li class="nav-contact"><a href="index.php?title=contact"></a></li>
    </ul>
    <script type="text/javascript">
    $('.nav li').click( function() {
    $(this).addClass('active').siblings().removeClass('active');
    });
    </script>

任何帮助都会非常感激，亲切的问候

Answer 1

如果您加载新页面，则无法跟踪之前的客户端互动。

您必须在php中提供active类，或者解析当前window.location，获取title值并根据此选择<li>元素。

Answer 2

Moonwave99是正确的。如果你想这样做，有2种可能性，1）你需要将3个页面的内容放在单个页面中，只需要使用show（）并隐藏jquery函数或display（block，none）属性。 2）当您将请求发送到服务器时，您将在查询字符串中发送标题。通过此查询字符串，您需要检查并将类名称设置为“活动”。

eg:  

request URL: -url-?title=a

<a href='url?title=a' <?php if($_GET['title'] == 'a') echo 'active';?>>a</a>
<b href='url?title=b'>b</b>
<c href='url?title=c'>c</c>

Answer 3

尝试在$(".nav li").click(

之前添加此PHP代码

<?php
    if(!empty($_GET["title"]) ) {
    ?>
    $(".nav-"+$_GET["title"])
    .addClass('active')
    .siblings()
    .removeClass('active');
<?}?>

单击另一个URL，jquery时保持类处于活动状态

3 个答案: