0

codeigniterでAjaxローダーを使用しています。別のビューをajaxで読み込んでいますが、押されたボタンにアクティブなクラスを追加する際に問題が発生しています。

これはAjaxスクリプトです。このステップの横での作業

$（this）.addClass（'active'）;
他のアクティブなクラスボタンを削除しますが、押している1つのボタンには挿入されません

<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は、id="ajax"を使用してメインビューdiv内にロードされます。

私はCodeigniterフレームワークを使用しています...（this）.addclass以外で実行されているものはすべて機能しませんが、以前はクラスを削除します。ありがとう

4

1 に答える 1

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;
        });
于 2012-07-23T12:06:38.123 に答える