0

我用 jquery 做了一些试验，遇到了一个大问题，过去一天我一直在用谷歌解决这个问题，但不知道如何解决。

我使用带有简单 php 脚本的 index.php 页面从数据库中检索我的内容，我使用如下链接：index.php?title=about（示例）。我发现了一个小的 jquery 脚本，它为<li>您单击添加了一个活动的类，如果 url 是 ( #about)，这将非常有效，它会保持该类处于活动状态，直到单击其他链接。但如果它是一个像“”这样的 url，index.php?title=about它会删除活动类。

这是我的 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>

任何帮助将不胜感激，亲切的问候

4

3 回答 3

0

如果您加载新页面，您将无法跟踪以前的客户端交互。

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

于 2012-09-26T11:27:05.970 回答
0

Moonwave99 是正确的。如果你想这样做，有2种可能性，1）你需要把3个页面的内容放在一个页面中，只需要使用show（）并隐藏jquery函数或显示（块，无）属性. 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>
于 2012-09-26T11:34:29.950 回答
0

尝试在之前添加此 php 代码$(".nav li").click(

<?php
    if(!empty($_GET["title"]) ) {
    ?>
    $(".nav-"+$_GET["title"])
    .addClass('active')
    .siblings()
    .removeClass('active');
<?}?>
于 2012-09-26T11:36:26.100 回答