У меня есть тег 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>
Я предполагаю, что это просто упрощенный пример того, что вы хотите сделать, поскольку изменение ссылки onclick можно выполнить inline:
<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>
Естественно, как предлагает Грант, вы также можете передать значение названия функции, но тогда вам действительно лучше всего делать встроенную версию и пропускать эту функцию.
Избавьтесь от тега BR внутри вашего элемента SCRIPT и перепишите функцию инструмента:
function tool(){
document.getElementsByName("link")[0].title = "after click";
}
и он будет работать. Однако это не оптимальный способ. Если вы назначаете параметр id в поле, вы можете хотя бы использовать document.getElementById(..) или даже лучше использовать библиотеку, например, jQuery.
Используя jquery, вы можете написать следующую команду:
$("a#link").attr("title","after click");
document.getElementsByName("link").title = "after click";
Вы можете использовать setAttribute (attributeName, value) для элемента, который вы хотите изменить.
document.getElementById('link').setAttribute('title', 'after click');
Это также работает для пользовательских атрибутов
Исправление кода Jason:
write document.getElementById( "ссылка" ). title вместо document.getElementsByName( "ссылка" ). title.
Я тестировал его на 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/
Я бы использовал http://jquery.com/ загрузить его и добавить ссылку script на него
Дайте тегу идентификатор, например myLink
Затем, используя JQuery, вы можете написать
$(document).ready(function () {
$("#myLink").click(function(){
$("#myLink").attr("title","after click");
});
});
Как показывает воск, лучше использовать getElementById()
<a id="aLink" href="http://www.bla.com" title="hello">link</a>
<script>
function tool(){
document.getElementById('aLink').title = "after click";
}
</script>
В вашем поставляемом коде две ошибки:
Как следует из названия, documentent.getElementById ищет вещи по идентификатору, а не по имени. Вам нужно будет указать идентификатор в теге привязки. Измените ссылку на <a href="javascript:tool()" id="link" name="link" title="before click">click here</a>
Вы загружаете documentent.getElementById содержимое переменной, называемой "ссылка", которая, по-видимому, не существует. Вы действительно хотели передать литеральную строку, которой нужны кавычки. Измените этот вызов на 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>
<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>
Я занимаюсь двумя вопросами здесь:
Название изменяется при наведении указателя мыши, но не в коде:
...
< a class= "a" href= "#" name= "home" title= "Главная" > Главная страница
...
document.getElementsByName( "home" ) [0].title= "Название изменено";//за работой
Как изменить класс ссылки:
FROM: < a class= "a" href= "#" name= "home" title= "Главная" > Главная страница
TO: < a class= "current" href= "#" name= "home" title= "Главная" > Главная
document.getElementsByName( "home" ) [0].class= "current";//не работает
Спасибо!
Название изменилось, но только в сгенерированном коде. Так работает JS - он работает только с презентацией. Попробуйте использовать панель инструментов Webdeveloper для Firefox, поскольку она имеет возможность показывать сгенерированный код вместе с оригинальным. Если вам нужен какой-либо другой способ, подумайте об использовании программирования на стороне сервера.
Мои наблюдения:
Никогда не смешивайте JS с HTML. Если вам нужно обновить свой код, это будет намного проще - найдите "ненавязчивый JS", чтобы лучше понять проблему. <a href="javascript:..."> или <a href="#" onclick="...">, следовательно, является плохой практикой кодирования.
Не используйте большие JS-пакеты, такие как JQuery, для простых задач. Они хороши только при полном их использовании.
Вам действительно нужно выполнять манипуляции с HTML "на лету" и почему? Является ли подсказка заголовка важной для вашего кода? Кто должен извлечь выгоду из этого: конечные пользователи или администратор? Как насчет доступности?
INFO на первом кодовом блоке:
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>
Длинная версия: http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/ (читайте также комментарии)
Примечание: необходимо ли отображать ссылку, если вы уже находитесь на текущей странице?