Как изменить атрибут заголовка в теге <a>с помощью JavaScript? - PullRequest
Новая
       16

Как изменить атрибут заголовка в теге <a>с помощью JavaScript?

10 голосов
/ 22 мая 2009

У меня есть HTML-тег, в котором изначально я хочу имя всплывающей подсказки, как указано в атрибуте «title». После того, как я нажму на ссылку, я хочу другое имя всплывающей подсказки. Я использовал приведенный ниже код, но он не работает. Кто-нибудь может мне помочь, пожалуйста! 

<html>
<head>
<script>

function tool(){
document.getElementsByName(link).title = "after click";
}

</script>
</head>
<body>
    <a href="javascript:tool()" name ="link" title="before click">click here</a>
</body>
</html>

Ответы [ 12 ]

20 голосов
/ 22 мая 2009

Я предполагаю, что это просто упрощенный пример того, что вы хотите сделать, так как изменение ссылки onclick может быть сделано в строке: 

 <a href="#" onclick="this.title='after click'" title="before click">...</a>

В любом случае, лучший способ - вообще не делать никаких поисков. Просто передайте ссылку на вашу ссылку в качестве параметра вашей функции: 

<script>
  function tool(link) {
    link.title = 'after click';
  }
</script>
<a href="#" onclick="tool(this)" title="before click">...</a>

Естественно, как предполагает Грант, вы также можете передать значение заголовка в функцию, но тогда вам действительно лучше просто полностью выполнить встроенную версию и пропустить функцию.

12 голосов
/ 22 мая 2009

Избавьтесь от тега BR внутри вашего элемента SCRIPT и переписайте функцию инструмента так: 

function tool(){
    document.getElementsByName("link")[0].title = "after click";
}

и это будет работать. Однако это не оптимальный путь. Если вы назначите параметру id поле, вы можете по крайней мере использовать document.getElementById (..) или, что еще лучше, использовать библиотеку, такую ​​как jQuery.

5 голосов
/ 22 мая 2009

Используя jquery, вы можете написать следующую команду: 

$("a#link").attr("title","after click");
2 голосов
/ 22 мая 2009

Вы можете использовать setAttribute (attributeName, value) для элемента, который вы хотите изменить. 

document.getElementById('link').setAttribute('title', 'after click');

Это также работает для пользовательских атрибутов

1 голос
/ 22 мая 2009

Исправление к коду Джейсона:

запись document.getElementById ("ссылка"). Заголовок вместо document.getElementsByName ("ссылка"). Заголовок.

Я тестировал его на IE7 и Firefox 3. 

<html>
<head>
    <script>
            function tool(){
                    document.getElementById("link").title = "after click";
            }
    </script>
</head>
<body>
    <a href="javascript:tool()" id="link" title="before click">
            click here
    </a>
</body>
</html>

Вы также можете изучить эту статью для создания хорошей всплывающей подсказки, используя javascript: http: //devirtu.com/2008/08/14/how-to-make-tooltip-with-javascript/

1 голос
/ 22 мая 2009 
document.getElementsByName("link").title = "after click";
0 голосов
/ 27 ноября 2009

Заголовок изменился, но только в сгенерированном коде. Так работает JS - он работает только с презентацией. Попробуйте использовать панель инструментов Webdeveloper для Firefox, потому что она имеет возможность показывать сгенерированный код вместе с оригинальным. Если вам нужен другой способ, подумайте об использовании серверного программирования.

Мои наблюдения:

  • Никогда не смешивайте JS с HTML. Если вам нужно обновить ваш код, это будет намного проще - найдите «ненавязчивый JS», чтобы лучше понять проблему. Поэтому <a href="javascript:..."> или <a href="#" onclick="..."> - плохая практика кодирования.

  • Не используйте большие пакеты JS, такие как JQuery, для простых задач. Они хороши, только если используются с полным потенциалом.

  • Вам действительно нужно выполнять HTML-манипуляции на лету и почему? Важна ли всплывающая подсказка для вашего кода? Кому это нужно: конечным пользователям или администратору? А как насчет доступности?

  • ИНФОРМАЦИЯ о первом блоке кода:

  • Если мы не знаем, какую ссылку использовать, мы должны собрать их все
  • и затем проверить коллекцию на событие onclick
  • Предложения:
    • используйте лучший обработчик событий;)
    • собирать ссылки только с определенной части страницы (основной или навигационный раздел) для повышения скорости
  • ПРЕДОСТЕРЕЖЕНИЯ:
  • это может замедлить рендеринг страницы
  • Атрибут title жестко закодирован и одинаков для всех ссылок 
<code>

function changeTitle1(){
// find the array of links inside the document
var a = document.getElementsByTagName('a');
// test the array against onclick event
for (var i = 0, j = a.length; i
  • ИНФОРМАЦИЯ о втором блоке кода:
  • Мы точно знаем, какую ссылку проверять
  • Предложение:
    • используйте лучший обработчик событий;)
  • ПРЕДОСТЕРЕЖЕНИЯ:
  • это можно использовать только для одного элемента
  • атрибут заголовка жестко закодирован и одинаков для всех ссылок 

function changeTitle2(){
// find the link
var a = document.getElementById('action_link');
// onclick event
a.onclick = function() {
try{
// change title value
this.title = 'This unique click happened as well!';
// or use setAttribute() method like this
/* this.setAttribute('title', 'This unique click happened as well!'); */

// disable default link action
return false;
}
// clear memory leaks with try-finally block
finally{a = null;}
}
}


    window.onload = function() {
        changeTitle1();
        //changeTitle2();
    }

@ spiro: Относительно вашего второго вопроса о текущем состоянии ссылок и изменении их CSS ... ну, используйте CSS:)

Короткая версия: 

<style type="text/css" media="screen">
    #home #current-home a,
    #contact #current-contact a,
    #about #current-about a
    {/* declarations to style the current state */}
</style>
</head>
<body id="home"> <!-- OR body id="contact" OR body id="about" -->
    <a href="#" title="Home" class="current-home">Home</a>
    <a href="#" title="Contact" class="current-contact">Contact</a>
    <a href="#" title="About us" class="current-about">About us</a>
</code>

Длинная версия: http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/ (читайте также комментарии)

Примечание: необходимо ли отображать ссылку , если вы уже находитесь на текущей странице?

0 голосов
/ 24 июня 2009

Я занимаюсь 2 вопросами здесь:

  1. Заголовок изменяется при наведении мыши, но не в коде:
    ...
    Home
    ...
    document.getElementsByName ("home") [0] .title = "Название изменено"; // за работой

  2. Как изменить класс ссылки:

    ОТ: Home
    TO:     Home
    document.getElementsByName ("home") [0] .class = "current"; // не работает

    Спасибо!

0 голосов
/ 23 мая 2009 
<html>
<head>
<script>
window.onload = function () {
    window.document.getElementById("link").onclick = function () {
        this.title = "after click";
        return false;
    };
};
</script>
</head>
<body>
    <a href="http://www.example.com" id="link" title="before click">Click Here</a>
</body>
</html>
0 голосов
/ 22 мая 2009

Две вещи не верны с вашим кодом:

  • Как следует из названия, documentmentent.getElementById ищет вещи по ID, а не по имени. Вам нужно будет указать идентификатор в этом теге привязки. Измените вашу ссылку на <a href="javascript:tool()" id="link" name="link" title="before click">click here</a>

  • Вы передаете documentmentent.getElementById содержимое переменной с именем "link", которой, по-видимому, не существует. Вы на самом деле хотели передать буквальную строку, которая нуждается в кавычках. Измените этот вызов на document.getElementById("link").title = "after click";

Собрав все воедино, вот как будет выглядеть ваш код: 

<html>
<head>
    <script>
        function tool(){
            document.getElementById("link").title = "after click";
        }
    </script>
</head>
<body>
    <a href="javascript:tool()" id="link" name="link" title="before click">
        click here
    </a>
</body>
</html>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...