Ненавязчивый Javascript: Удаление ссылок, если включен Javascript

Question

Я использую PopBox для увеличения эскизов на своей странице. Но я хочу, чтобы мой сайт работал даже для пользователей, которые отключили javascript.

Я пытался использовать следующий HTML-код:

<a href="image.jpg"> 
    <img src="thumbnail.jpg" pbsrc="image.jpg" onclick="Pop(...);"/> 
</a> 

Теперь мне нужно отключить а-тегов с помощью JavaScript, иначе мой Popbox не будет работать.

Как это сделать?

Answer 1

Просто поставить OnClick на а- тег:

< A HREF = "image.jpg" OnClick = "Pop (...), возвращение ложным;"> < IMG ...> </а>

Убедитесь, что вы поместите " return false "в конце - это делает его не следовать якорной ссылке, если js выполняется.

Answer 2

Поместите событие OnClick на саму ссылку, и возвращать ложь из обработчика, если вы не хотите, поведение по умолчанию, которое будет выполняться (по ссылке, которым необходимо следовать)

Answer 3

Вы могли бы дать весь ваш запасной якорь тег особого имя класса, как «простой»

prototype Используя, вы можете получить массив всех тэгов, использующие этот класс, используя селектор CSS, например

var anchors=$$('a.simple') 

Теперь вы можете перебрать этот массив и очистить HREF атрибуты, или установить обработчик OnClick, чтобы переопределить нормальное поведение, и т.д ...

(ред добавить, что другие методы, перечисленные выше, гораздо проще, это просто пришло от фона делать много ненавязчивого JavaScript, где ваши JS пинки в и идут и дополняющий функционирующая HTML-страницу с дополнительной вещью!)

Answer 4

атрибут href не требуется для анкеров (<a> тегов) , поэтому избавьтесь от этого ...

<a id="apic001" href="pic001.png"><img src="tn_pic001.png"></a> 

    <script type="text/javascript"> 
     document.getElementById("apic001").removeAttribute("href"); 
    </script> 

Этот метод позволит избежать конкуренции в библиотеке за onclick.

Протестировано в IE6/FF3/Chrome. Боковое преимущество: вы можете напрямую ссылаться на часть страницы, содержащую этот миниатюру, используя идентификатор как фрагмент URI: http://whatever/gallery.html#apic001.

Чтобы обеспечить максимальную совместимость с браузером, добавьте атрибут привязки в метку привязки name="apic001" (значения «имя» и «идентификатор» должны быть идентичными).

Использование jQuery, dojo, Prototype и т. Д. Вы должны иметь возможность удалить атрибут removeAttribute на нескольких аналогичных якорях без необходимости использования идентификатора.

Answer 5

Вы должны быть в состоянии смешивать и сочетать возвращение ложной от идеи Криса с вашим собственным кодом:

<a href="image.jpg" onclick="return false;"> 
    <img src="thumbnail.jpg" pbsrc="image.jpg" onclick="Pop(...);"> 
</a> 

Если кто-то Javascript отключена, то их браузер игнорирует заявление OnClick в обоих элементах и ​​следует по ссылке ; если у них включен Javascript, то их браузер следует за операторами OnClick - первый говорит им не следовать ссылке <a>.^_^

Answer 6

Могу ли я предложить, на мой взгляд, лучшее решение? Это использование jQuery 1.4+.

Здесь у вас есть контейнер со всеми вашими фотографиями. Обратите внимание на добавленные классы.

<div id="photo-container"> 
    <a href="image1.jpg"> 
     <img class="popup-image" src="thumbnail1.jpg" pbsrc="image1.jpg" /> 
    </a> 
    <a href="image2.jpg"> 
     <img class="popup-image" src="thumbnail2.jpg" pbsrc="image2.jpg" /> 
    </a> 
    <a href="image3.jpg"> 
     <img class="popup-image" src="thumbnail3.jpg" pbsrc="image3.jpg"/> 
    </a> 
</div> 

то сделать один обработчик события таким образом:

<script type="text/javascript"> 
$(document).ready(function(){ 
    var container = $('#photo-container'); 

    // let's bind our event handler 
    container.bind('click', function(event){ 
     // thus we find (if any) the image the user has clicked on 
     var target = $(event.target).closest('img.popup-image'); 

     // If the user has not hit any image, we do not handle the click 
     if (!target.length) return; 

     event.preventDefault(); // instead of return false; 

     // And here you can do what you want to your image 
     // which you can get from target 
     Pop(target.get(0)); 
    }); 
}); 
</script>