Пометить цель ссылки

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть HTML-файл, содержащий это:

 <span id="id1"> text 1</span>
<span id="id2"> text 2</span>
<span id="id3"> text 3</span>
<a class="mark" href="#id1">mark text 1</a> 
<a class="mark" href="#id2">mark text 2</a> 
<a class="mark" href="#id3">mark text 3</a>

Если я нажму на одну из <a> ссылок, я хочу, чтобы соответствующий диапазон изменил цвет текста на красный, а весь остальной цвет текста вернул на черный, как они были, так что только последняя нажатая ссылка делает ее назначение отображаемым красным.

Это способ сделать это:

 $("a.mark").on('click', function(e) {
    $("a.mark").attr( 'href').css('color', 'black') ;
    $(this).attr('href').css( 'color', 'red') ; 
    }
);

Ответ №1:

Существует встроенный селектор css :target , который выполнит то, что вы пытаетесь сделать с помощью javascript.

http://css-tricks.com/on-target/

 span:target{color:red}

:target выберет любой идентификатор, указанный хэшем в URL, поэтому: /index.html#span1 нацелен на идентификатор span1

Ответ №2:

Вот что вы хотите:

JsFiddle: http://jsfiddle.net/eGMqh/

HTML:

 <span id="id1"> text 1</span>

<span id="id2"> text 2</span>

<span id="id3"> text 3</span>

<a class="mark" href="#id1">mark text 1</a> 
<a class="mark" href="#id2">mark text 2</a> 
<a class="mark" href="#id3">mark text 3</a>

JavaScript:

 $(function () {
    // Handler for .ready() called.
    $("a.mark").on('click', function (e) {
        $("span").css("color", "black");
        $($(this).attr("href")).css('color', 'red');
    });

});

1. Что, если на странице есть другие, не связанные с ней, span ы? Они color: black также будут установлены.

2. Действительно, но я мог бы просто присвоить соответствующим промежуткам класс.

Ответ №3:

~~Закройте, просто удалите .attr('href') :~~

~~$("a.mark").on('click', function (e) { $("a.mark").css('color', 'black'); $(this).css('color', 'red'); });~~

~~Пример jsFiddle~~

Если вы хотите, чтобы цвет промежутка изменился, используйте:

 $("a.mark").on('click', function (e) {
    $("span").css('color', 'black');
    $($(this).attr('href')).css('color', 'red');
});

Пример jsFiddle

Ответ №4:

Закрыть.

 $("a.mark").on('click', function(e) {
  $("a.mark").each(
    function() {
      $($(this).attr('href')).css('color', 'black') ;
    }
  );

  $($(this).attr('href')).css( 'color', 'red') ; 
});

Мы удаляем href каждый a.mark из них, а затем извлекаем этот элемент, устанавливая его цвет на черный (кстати, рассмотрите возможность использования классов вместо прямых цветовых стилей).

Затем мы берем href атрибут только того элемента, на который нажата кнопка, и устанавливаем для этого элемента значение color red .

Пример: http://codepen.io/paulroub/pen/GhsJv

Ответ №5:

Вы были близки:

Это сработало для меня…

 $("a.mark").on('click', function(e) {
    $("a.mark").css('color', 'black') ;
    $(this).css( 'color', 'red') ; 
    }
);