помогите добавить class/id элементу
Здравствуйте всем!
Есть готовая фотогалерея, в которой не реализовано выделение активной картинки (т.е. нажимаем на картинку и у нее присваивается border 1px white к примеру). Есть задача сделать это выделение. Сам я в JS не разбираюсь, прошу помощи у вас: Как добавить класс active при нажатии на картинку? код события которое происходит при onclick:
//dom
function vsig_dom(obj) {return document.getElementById(obj); }
//switch image without reload
function switchimg(t_ident, t_ident_b) {
//topimage
var topimg = "topimg" + t_ident_b[2];
t_ident[6] = t_ident[6].replace(/'/g, "'"); //replace ' with ' in alt-title
t_ident[4] = t_ident[4].replace(/'/g, "'"); //replace ' with ' in link-title
t_ident[6] = t_ident[6].replace(/&/g, "&"); //replace & with & in alt-title
//switch caption
var t_cap = (typeof (vsig_dom(topimg).parentNode.href) !== "undefined") ? (vsig_dom(topimg).parentNode.parentNode.getElementsByTagName("div")) : (vsig_dom(topimg).parentNode.getElementsByTagName("div"));
if (t_cap.length >= 1) {
t_cap[0].innerHTML = (t_ident[1] !== "" || t_ident[2] !== "") ? ("<span>" + t_ident[1] + "</span><span>" + t_ident[2] + "</span>") : "";
}
//switch link
if (typeof (vsig_dom(topimg).parentNode.href) !== "undefined") {
vsig_dom(topimg).parentNode.href = t_ident[3];
vsig_dom(topimg).parentNode.title = t_ident[4];
vsig_dom(topimg).parentNode.target = t_ident[5];
}
//switch image
vsig_dom(topimg).src = t_ident_b[0] + "vsig_images/" + t_ident[0];
vsig_dom(topimg).alt = t_ident[6];
vsig_dom(topimg).title = t_ident[6];
vsig_dom(t_ident).id='active';
}
Рабочая галерея тут |
Цитата:
|
по моему здесь JS не нужен
можно CSS обойтись добавить
.vsig_thumb a:active img { border: 1px solid white; }
можно почитать http://htmlbook.ru/css/active |
Цитата:
ну еще в машинах разбираюсь :D |
Pavel M., так "нажал" и "навел" кагбе разные действия и последствия будут разные... После нажатия изменения остаются, а после "убирания наведения" всё возвращается на круги своя... :)
|
Цитата:
|
Цитата:
|
Цитата:
только если Новосиб:) |
Цитата:
|
Цитата:
|
Цитата:
|
у тебя в css
.vsig_thumb img { ... border: medium none !important; ... } значит тогда или убери !important или добавь !important в правило с :active |
Цитата:
но работает и правда только при наведении мышь убираешь убирается border |
тогда javascript нужен - класс у выбранного элемента установить
и на него повесить стили это надо 'мотор с кузова Газели в гараж занести' без этого никак. |
Цитата:
я думал тут всего 1 строчку дописать... |
Цитата:
|
Цитата:
|
Pavel M., и вот такое ты таки советовал? :D
<style type="text/css">
p:active {
color: red;
}
</style>
<p>Бивас, тест!</p>
Ты хоть сам-то тесть, что другим предлогаешь... ;) |
Цитата:
|
Цитата:
в первом сообщении темы было > т.е. нажимаем на картинку и у нее присваивается border 1px white тут сss бы справился а теперь все так сложно, что только ты ему поможешь |
Цитата:
|
Грузчики, ksa. :lol:
|
измени:
//switch image without reload
function switchimg(t_ident, t_ident_b) {
на:
//switch image without reload
function switchimg(t_ident, t_ident_b, a) {
a.style.border = "1px solid #FF0000";
а вызов в <а>: onclick="switchimg(vsig_4_0[7],vsig_4_0_b, this);return false;" должно заработать. |
Цитата:
a.firstChild.style.border = "1px solid #FF0000"; отлично работает! |
Еще осталась проблемка - как сделать чтобы при клике на следующую уменьшенную картинку border у предыдущей очищался?
Сделал так (ниже), но не работает, подскажите что не так? у меня есть предположения что переменную prev_thumb надо гдето в другом месте сохранять
var prev_thumb= "";
a.firstChild.active_thumb = 0;
if (a.firstChild.active_thumb == 0) {
prev_thumb.firstChild.style.border = "";
prev_thumb.firstChild.active_thumb = 0;
a.firstChild.style.border = "2px solid #FFFFFF";
a.firstChild.active_thumb = 1;
prev_thumb = a;
}
|
magnateg, начинай уже делать полные тестовые примеры... Это увеличит твои шансы на помощь. ;)
|
Цитата:
могу дать ссылку на работающий пример, это вы имели ввиду? |
Цитата:
Вот например http://javascript.ru/forum/jquery/23...tml#post135349 |
Решил проблему:
function switchimg(t_ident, t_ident_b, abc) {
if (abc != "1")
{
if (vsig_dom('active_thumb')) {
vsig_dom('active_thumb').id = ""
}
abc.firstChild.id ="active_thumb";
}
//topimage
var topimg = "topimg" + t_ident_b[2];
t_ident[6] = t_ident[6].replace(/'/g, "'"); //replace ' with ' in alt-title
t_ident[4] = t_ident[4].replace(/'/g, "'"); //replace ' with ' in link-title
t_ident[6] = t_ident[6].replace(/&/g, "&"); //replace &amp; with & in alt-title
//switch caption
var t_cap = (typeof (vsig_dom(topimg).parentNode.href) !== "undefined") ? (vsig_dom(topimg).parentNode.parentNode.getElementsByTagName("div")) : (vsig_dom(topimg).parentNode.getElementsByTagName("div"));
if (t_cap.length >= 1) {
t_cap[0].innerHTML = (t_ident[1] !== "" || t_ident[2] !== "") ? ("<span>" + t_ident[1] + "</span><span>" + t_ident[2] + "</span>") : "";
}
//switch link
if (typeof (vsig_dom(topimg).parentNode.href) !== "undefined") {
vsig_dom(topimg).parentNode.href = t_ident[3];
vsig_dom(topimg).parentNode.title = t_ident[4];
vsig_dom(topimg).parentNode.target = t_ident[5];
}
//switch image
vsig_dom(topimg).src = t_ident_b[0] + "vsig_images/" + t_ident[0];
vsig_dom(topimg).alt = t_ident[6];
vsig_dom(topimg).title = t_ident[6];
}
|
Цитата:
$(this).prev().css({'border':0}) |
Подскажите пожайлуста.
Есть ли в файле стилей что-то наподобии $([id^*$='F']) ? Обойтись без addClass хотелось бы $([id^='F']) .addClass('F') , ...стиль уже привязанн к АйДи F, а этот АйДи ичнутый на + еденицу( i=o..... i++) и таким образом их уже несколько , но зато с единым корнем F. А поэтому , стиль #F{border:3;color:FFF } #F-1...#F-15 :) уже не ловит ...Не писать же #F-1б,#F-2...,#F-15 {border:3;color:FFF } :) |
Цитата:
<style type="text/css">
p[id^='item_'] {
color: red;
}
</style>
<p id='item_1'>Item 1</p>
<p id='item_2'>Item 1</p>
<p id='item_3'>Item 1</p>
|
Цитата:
Работает !!! Я вижу ,что Вы и по Квери спец как в чистом ДжЭс. Откуда такие глубочайшие знания , Гуру КСА? |
Цитата:
А конкретно эти сведения можно почерпнуть в любой документации по селекторам атрибутов... Например тут http://www.xiper.net/learn/css/selec...selectors.html Почитай, не поленись... ;) |
$(this).css({'border':200px}).siblings.css({'border':0px})
Есть еще 1 часто используемый вариант $(this).css({'border':200px}) (в Паренте )$('img').css({'border':0px}) Чтоб добиться результата во втором случае-нужно поменять местами пока не заработает |
Цитата:
. Подскажите пожайлуста, как выудить сумму из такого случая,а то застрял <div id='Nav_1'>xxxx</div> var d= $(this).parent().parent().attr('id').split('Nav_')[1]+143 alert(d) Проблему я ,вообще-то уже решил,но лишь изначально изменив отсчет ич-айди с и=0 на и=-1.Но все равно БЫЛ БЫ ОЧЕНЬ ПРИЗНАТЕЛЕН ЗА РЕШЕНИЕ alert(d) |
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function(){
$('[id^="Nav_"]').each(function(){
alert($(this).text())
});
});
</script>
</head>
<body>
<div id='Nav_1'>xxxx</div>
<div id='Nav_2'>yyyy</div>
<div id='Nav_3'>zzz</div>
</body>
</html>
|
Та не...
Я имел ввиду var f= [1] var h=[34] alert(f+h) ...Или страницу, где почитать |
Андрей38, начинай таки делать сам тестовые примеры... ;)
|
Цитата:
|
| Часовой пояс GMT +3, время: 21:05. |