带有 Codeigniter 的 Ajax 加载器

Question

我正在使用带有 codeigniter 的 Ajax 加载程序。 我正在使用 ajax 加载另一个视图，但在将活动类添加到按下的按钮时遇到问题。

这是 Ajax 脚本。 它在这一步旁边工作

$(this).addClass('active');

它删除了另一个活动类按钮，但不会插入正在按下的按钮

<script type="text/javascript">

    $(document).ready(function(){
        var baseurl = "<?php echo base_url() ?>";

                //$('#submenu li a').click(function() {
                //$('#submenu li').removeClass('active');    
                //$(this).addClass('active');
                //});   

        // Ajax Slide & Fade Content with jQuery
        $('.more').live('click',function(){
            var href = $(this).attr('href');
            if ($('#ajax').is(':visible')) {
                $('#ajax').css('display','block').animate({height:'1px'}).empty();
            }
            $('#ajax').html('<img class="loader" src="'+baseurl+'assets/img/ajax-loader.gif" alt="">');
            $('#ajax').css('display','block').animate({height:'500px'},function(){
                $('#ajax').load(baseurl +'index.php/andreiaclinicaestetica/content #'+href,function(){
                    $('#ajax').hide().fadeIn();
                    $('#submenu li a').click(function() {
                    $('#submenu li').removeClass('active');    
                    $(this).addClass('active');
                    }); 
                });
            });
            return true;
        });
    });
</script>

这是正在加载的视图

    <div class="content" id="page_01">
        <h3>Lorem ipsum dolor</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
    </div>
    <div class="content" id="page_02">
        <ul class="nav nav-tabs" id="submenu">
            <li class="active"><a href="#">Corpo</a></li>
            <li><a href="#">Rosto</a></li>
            <li><a href="#">Depilação</a></li>
            <li><a href="#">Maquilhagem</a></li>
            <li><a href="#">Rádiofrequência Bipolar</a></li>
            <li><a href="#">Spa</a></li>
        </ul>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
    </div>
    <div class="content" id="page_03">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
    </div>
    <div class="content" id="page_04">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
    </div>

Div 在主视图 div 中加载，id="ajax"。

我正在使用 Codeigniter 框架...在 (this) 旁边运行的一切都很好。addclass 将不起作用，但之前删除了该类。谢谢

Answer 1

用$('.more').addClass('active');专门定位它

或将其分配为变量以使用如下方式调用：

$('.more').live('click',function(){
            var $this = $(this);
            var href = $this.attr('href');
            if ($('#ajax').is(':visible')) {
                $('#ajax').css('display','block').animate({height:'1px'}).empty();
            }
            $('#ajax').html('<img class="loader" src="'+baseurl+'assets/img/ajax-loader.gif" alt="">');
            $('#ajax').css('display','block').animate({height:'500px'},function(){
                $('#ajax').load(baseurl +'index.php/andreiaclinicaestetica/content #'+href,function(){
                    $('#ajax').hide().fadeIn();
                    $('#submenu li a').click(function() {
                    $('#submenu li').removeClass('active');    
                    $this.addClass('active');
                    }); 
                });
            });
            return true;
        });