0

Есть вот такой вот кусок кода в файле .php, в нем ajax-код, который меняет контент. Нужно чтоб ссылки меняли цвет, когда выдлелялись. Прописал в CSS-файле, но что-то не срабатывает.....Подскажите, пожалуйста, где я что неправильно делаю?

CSS:

/*
a:checked {
color: red;
text-decoration: underline;
}

.loadBtn  a:active {
color: #f00; 
}
*/
.activeEv{
color: #f00; /* Цвет активной ссылки */
}

File .php :

    <body>
    <ul>
    <li  class="loadBtn">page1</li>
    <li  class="loadBtn">page2</li>
    <li  class="loadBtn">page3</li>
    </ul>
    <script>
            $(document).ready(function(){
                var tpls = ['page1.php', 'page2.php',  'page3.php'];

                $('.loadBtn').click(function(){
           $('.loadBtn').removeClass('activeEv');
           $(this).addClass('activeEv');
                    loadContent($(this).index());
                });
                loadContent(0);

                function loadContent(index) {
                    if (!tpls[index]) return;
                    $.ajax({
                        url: tpls[index],
                        cache: false,
                        success: function(html){
                            $("#content").html(html);
                        }
                    });
                }

            });
        </script>

</body>
2
  • Выбранная ссылка — это как? Посещенная? 27 мар 2017 в 9:07
  • ваш код выглядит рабочим, скорее всего ошибка не в этом, проверьте вывод ошибок в консоли
    – Crantisz
    27 мар 2017 в 11:51

3 ответа 3

3

Используйте добавление класса при клике, например:

<a href='page1.php' class='ajax-link'>Page 1</a>
<a href='page2.php' class='ajax-link'>Page 2</a>
<a href='page3.php' class='ajax-link'>Page 3</a>
<script>

    function loadContent(uri) {
        $.ajax({
            url: uri,
            cache: false,
            success: function(html){
                $("#content").html(html);
            }
        });
    }
    $('.ajax-link').click(function(e){
        var link = e.target;

        if (link){
            loadContent(link.href);
            $('.ajax-link').removeClass('is-active');
            $(this).addClass('is-active');
        }
    })
</script>
<style>
    .is-active {
        color: red;
    }
</style>
2

Вы можете при click задать определённый класс активной ссылке

.activeEv{
color: #f00; /* Цвет активной ссылки */
}



 <body>
    <ul>
    <li  class="loadBtn">page1</li>
    <li  class="loadBtn">page2</li>
    <li  class="loadBtn">page3</li>
    </ul>
    <script>
            $(document).ready(function(){
                var tpls = ['page1.php', 'page2.php',  'page3.php'];

                $('.loadBtn').click(function(){
$('.loadBtn').removeClass('activeEv');
$(this).addClass('activeEv');
                    loadContent($(this).index());
                });
                loadContent(0);

                function loadContent(index) {
                    if (!tpls[index]) return;
                    $.ajax({
                        url: tpls[index],
                        cache: false,
                        success: function(html){
                            $("#content").html(html);
                        }
                    });
                }

            });
        </script>

</body>
9
  • Хм....сделал ВСЁ, как Вы написали......ничего не изменилось.... 27 мар 2017 в 9:19
  • 1
    как не изменилось? новый клас для loadBtn задаётся? может у вас в стилях есть другие цвета для loadBtn ?
    – Arsen
    27 мар 2017 в 9:20
  • добавил Ваши изменения (и в код в вопросе), ничего не изменилось.... 27 мар 2017 в 9:36
  • 1
    вы что то не так делаете, на скорую руку скопировал код, посмотрите jsfiddle.net/L5k30mvo вы не ответили на вопрос, в вашем коде новый клас для loadBtn задаётся?
    – Arsen
    27 мар 2017 в 9:42
  • 1
    @Александр вам надо показать ваш изменённый код, чтобы понять где и что вы не так делаете. Вы проверили как код должен работать на jsfiddle.net/L5k30mvo ??
    – Arsen
    30 мар 2017 в 14:22
0

Arsen, Вы помогли мне разобраться в ЧЕМ именно проблема, а проблема оказалась в конфликте бутстрапа, т.к. у меня еще был бутстрап подключен....поэтому я вопрос закрываю. Отдельное спасибо за то, что показали мне интересный инструмент, благодаря которому я нашел причину,но еще пока не поборол...

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.