Pамена тегов
<script type="text/javascript">$('td a').click(function() { $('<span>' + '2011' + '</span>').replaceWith($('<a>' + '2011' + '</a>').attr('href','#2011')); $('<span>' + '2010' + '</span>').replaceWith($('<a>' + '2010' + '</a>').attr('href','#2010')); $('<span>' + '2009' + '</span>').replaceWith($('<a>' + '2009' + '</a>').attr('href','#2009')); $('<span>' + '2008' + '</span>').replaceWith($('<a>' + '2008' + '</a>').attr('href','#2008')); $(this).replaceWith('<span>' + $(this).text() + '</span>'); });</script> Есть 4 ссылки 2011, 2010, 2009, 2008 Я хочу сделать, чтобы при клике по ссылке она становилась не активной, то есть менялась на строку. А при клике по другой ссылке, она бы снова становилась ссылкой и т.д. Скрипт заменяет <a> на <span>, а обратно не возвращает. Может проще это сделать перемещением элементов в невидимый див(dettach, append)? |
Накидал как можно сделать:
http://jsfiddle.net/UY4gS/ |
micscr, спасибо!
Но меня волнует еще 2 вопроса, никак не найду: можно ли как то передать id от одного к другому при замене тегов? Так не получается $('td a').click(function() { var _id = $(this).attr('id'); $(this).replaceWith('<span>' + $(this).text() + '</span>' +.attr('id',_id)); }); И можно ли искать тег не по id или class, а по содержимому? Например, найти строку с текстом "2011" и заменить на ссылку. Так он меняет все строки: $('span').text('2011').replaceWith($('td a').text('2011').attr('href','#2011')); |
Цитата:
$("a:contains('2011')"); Цитата:
$(this).replaceWith('<span id="'+$(this).attr('id')+'">' + $(this).text() + '</span>'); |
Благодарю всех за участие в моем обучение JQ :victory:
Написал вариант функции более понятный для новичка, потому что с тем, что предложил micscr, я долго разбирался :) $('td a').live("click", function() { var $anchor = $(this); $('#y2011').hide('fast'); $('#y2010').hide('fast'); $('#y2009').hide('fast'); $('#y2008').hide('fast'); $('span:contains("2011")').replaceWith('<a href="#y2011">2011</a>'); $('span:contains("2010")').replaceWith('<a href="#y2010">2010</a>'); $('span:contains("2009")').replaceWith('<a href="#y2009">2009</a>'); $('span:contains("2008")').replaceWith('<a href="#y2008">2008</a>'); $($anchor.attr('href')).show('fast'); $(this).replaceWith('<span>' + $(this).text() + '</span>'); }); В левой ячейки 4 дива(у каждого id соответсвует названию якоря), а в правой 4 кнопки и таким образом можно сменять содержимое левой ячейки через ксс:дисплей |
Часовой пояс GMT +3, время: 03:07. |