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, время: 18:16. |