带有Codeigniter的Ajax Loader

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 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框架......除了（这个）之外，所有东西都运行良好.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;
        });