2

HTML
我正在添加我的两个链接，它们会将我的“未回答”链接发送到我的管理控制器，并将我的“已回答”链接发送到我的管理控制器中的一个函数。

<h2 class="unanswered">
   <?=anchor('admin/', 'Unanswered', array('class' => 'selected'))?>
</h2>

<h2 class="answered">
   <?=anchor('admin/answered_posts', 'Answered')?>
</h2>

Jquery
这里我只是想在我的链接中添加和删除样式。当我保持返回 false 时，我的样式工作正常，但我在 html 锚点中的 href 不再运行，所以我无法从我的控制器取回所需的帖子。当我删除 return false 时，我的 href 工作正常，并且我从控制器中取回了我需要的东西，但是我在 jQuery 中添加的样式不再起作用。

$('.unanswered').click(function(){
       $('.answered a').removeClass('active');
       $('.unanswered a').addClass('active'); 
       return false;
     });

     $('.answered').click(function(){
       $('.unanswered a').removeClass('active');
       $('.answered a').addClass('active');
       return false;
     });

旁注
我也尝试过这样做：

$('.unanswered').click(function(e){
       e.preventDefault();
       $('.answered a').removeClass('active');
       $('.unanswered a').addClass('active'); 
     });

     $('.answered').click(function(e){
       e.preventDefault();
       $('.unanswered a').removeClass('active');
       $('.answered a').addClass('active');
     });
4

1 回答 1

2

我会参考这个问题的评论 - 如果我理解你的意图（点击一个链接，在服务器上更新一些幕后的东西，并在页面上应用一个样式而不重新加载页面）这可能是你想要的与AJAX有关。例如（未经测试的代码）：

$('.unanswered, .answered').click(function() {
    $.ajax({
        url: $(this).attr('href')
    }).done(function() {
        /* You'll need to add some logic in here to remove the active class from
        the answered or unanswered question if it exists. Depending on the rest of your 
        HTML, this could be done with something like $(this).closest('myWrapper').find('a.active').removeClass('active') */

        /* Once you've cleaned up any active classes, add an active class to this element */
        $(this).addClass('active');

    });
});

更多关于 jQuery AJAX 的阅读：http: //api.jquery.com/jQuery.ajax/

由于我不完全了解您要做什么，因此您也可以尝试一下（这将更新课程，然后提交请求）。由于页面会快速重新加载，您可能看不到 CSS 更改。

$('.answered').click(function() {
   // Set up the classes here
   $('.unanswered a').removeClass('active');
   $(this).addClass('active');

   /* When this element has an active class, then it will redirect to the link's URL, the HREF attribute. We do this check because javascript is asynchronous, all lines can run at the same time, so this prevents window.location from being called before the class is changed */
   if($(this).hasClass('active')) {
       window.location = $(this).attr('href');
   }

   // Still return false to prevent the default redirect that would happen without javascript.
   return false;
 });
于 2013-02-04T17:04:47.357 回答