Javascript: location.replace и CSS-классы

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я хочу перевести следующий HTML-код в функцию Javascript:

 <a class='example' href="../content/flash.html">Click Me</a>

В принципе, я хочу дублировать эффект нажатия на ссылку через JS.

 function doStuff()
        {
            location.replace('../content/ajax.html');
        }

Приведенный выше код просто перенаправляет на ajax.html .

Как я могу активировать CSS-класс ‘example’ через Javascript при перенаправлении?

Причина, по которой я хочу это сделать: CSS-class ‘example’ показывает содержимое ajax.html внутри лайтбокса (Colorbox, если быть точным).

1. Не существует такого понятия, как «класс CSS». Вы имеете в виду «Набор правил CSS с селектором классов»? «HTML-элемент, который является членом определенного (HTML) класса»? Что-то еще?

2. Что означает «активировать» в этом контексте? В терминах CSS, если что-то активно, то это нажатие кнопки мыши во время наведения на него, или нажатие клавиши запуска во время фокусировки, но в данном контексте это не имеет смысла.

3. Вызов location.replace не будет иметь такого же эффекта, как щелчок по ссылке. Он заменяет текущую страницу в истории. Вы бы хотели location.href = something для этого.

4. Вопрос расплывчатый. Пожалуйста, опишите, что вы хотите, чтобы произошло более подробно.

Ответ №1:

Самый быстрый способ добиться подобных результатов — это войти в jQuery, в частности, в его click() обработчик и функцию ajax load() :

HTML

 <div id="contentArea"></div>
<a class="example" href="#">Click Me</a>

JQUERY

 $(function () {

    $('a.example').click(function () { 
        $('#contentArea').load('../content/flash.html');   
        return false;
    });

});

Ответ №2:

Тоже немного запутался, но вот предположение.

Вы могли бы указать идентификатор:

 <a id='clickMe' class='example' href="../content/flash.html">Click Me</a>

И в js:

 document.getElementById("clickMe").className = "example";

Ответ №3:

Я надеюсь, вы ищете что-то вроде этого

 document.getElementById('myDiv').className = 'myRedDivClass';

попробуйте использовать jquery, и это облегчит вам жизнь

http://api.jquery.com/addClass/

Ответ №4:

Я надеюсь, что я не понял вопроса, поскольку… Ну, это немного странно. Далее ~ РЕДАКТИРОВАТЬ: я написал «Я не надеялся, что понял вопрос. Я имел в виду делать. LOL

Если у вас больше одного .example класса, тогда вам придется использовать getElementsByClassName(); , но не все браузеры поддерживают это. Однако, если у вас есть только один элемент, я предлагаю присвоить ему идентификатор, а затем выбрать этот элемент с помощью getElementById(); .

Решение для того, getElementsByClassName(); чтобы не поддерживаться во всех браузерах, было бы:

 function getElementsByClassName(classname) {
    if (document.getElementsByClassName) {
        return document.getElementsByClassName(classname);
    } else {
        return (function (classn, document) {
            var classElements = [],
                e = document.getElementsByTagName("*"),
                len = e.length,
                pattern = new RegExp("(^|\s)"   classn   "(\s|$)"),
                i, k;

            for (i = 0, k = 0; i<len; i  ) {
                if (pattern.test(e[i].className)) {
                    classElements[k] = e[i];
                    k  ;
                }
            }
            return classElements;
        })(classname, document);
    }
}

Связующая часть

Итак, я думаю, что лучший способ сделать это — использовать addEventListener(); однако, это мое личное мнение, и вы можете найти чье-то другое, которое, по вашему мнению, больше подходит для того, что вам нужно.

 function doStuff() {
    location.replace('../content/ajax.html');
}

var es = getElementsByClassName('example'),
    len = e.length;

for(i=0; i<len; i  ) {
    es[i].addEventListener("click", doStuff, false);
}

xoxo

PS: Я не проверял это, поэтому, если что-то не так, кто-нибудь отредактируйте это или дайте мне знать в комментариях!