Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Выбрать активный элемент меню (https://javascript.ru/forum/jquery/39249-vybrat-aktivnyjj-ehlement-menyu.html)

ALIEN-XIII 22.06.2013 13:55

Выбрать активный элемент меню
 
Есть вот такой код в header.php:
<!--><script language="JavaScript"
src="http://www.protraffik.ru/wp-content/themes/AskIt/js/jquery.min.js"></script>
<head><script>
jQuery(function(){
$(img2).hover(function(){
$(this).stop().animate({opacity:'1.0'})},
function(){$(this).stop().animate({opacity:'.6'})}
);
});
</script>
<style>
 #img2{opacity:.3;filter:alpha(opacity=30)}
 
</style></head>

<body>

<table cellpadding="0" cellspacing="0" width="800" bgcolor="#202020" height="43" style="margin-left: 0"><br/><br/><br/><br/><br/><br/><br/>
  <tr> 
   <td height="43" valign="top" align="center" style="padding-left: 0"  width="160">
   <a   href="/">
   <img  id="img2" src="btn_home.png" width="160" height="43"></a></td>
   <td height="43" valign="top" align="center" style="padding-left: 0" width="160">
   <a href="/" >
   <img id="img2" src="btn_apps.png" width="160" height="43"></a></td>
   <td height="43" valign="top" align="center" style="padding-left: 0" width="160">
   <a href="/">
   <img  id="img2" src="btn_videos.png" width="160" height="43"></a></td>
   <td height="43" valign="top" align="center" style="padding-left: 0" width="160">
   <a   href="/">
   <img  id="img2" src="btn_services.png" width="160" height="43"></a></td>
   <td height="43" valign="top" align="center" style="padding-left: 0" width="160">
   <a   href="/">
   <img  id="img2" src="btn_about.png" width="160" height="43"></a></td>
</td>
  </tr>
 </table>
 

</body>


Вопрос, наверное частый, но всё же. Как запомнить, какой элемент выбран и сделать ему opacity = 1 до следующего нажатия на одну из кнопок в меню? Видимо параметр нужно передать в div через события onclick гиперссылок. Возникли затруднения.

Вот как выглядит страница.

Помогите, пожалуйста. :)

mta88 22.06.2013 14:40

вы пробовали хотя бы что-нибудь читать про javascript и html?

нельзя давать одинаковые id разным элементам страницы
у вас нет переменной img2 для $(img2) -- наверно вы имели ввиду '#img2'
почему <style>, <title> и <meta> находятся в <body> а не в <head>?

почитайте хоть что-нибудь и потом приходите

ALIEN-XIII 22.06.2013 23:14

Цитата:

Сообщение от mta88 (Сообщение 257805)
вы пробовали хотя бы что-нибудь читать про javascript и html?
нельзя давать одинаковые id разным элементам страницы
у вас нет переменной img2 для $(img2) -- наверно вы имели ввиду '#img2'

Как бы это не было написано, это работает отлично и по этому вопросу на этом этапе нареканий нет (причём если здесь id делать разными код работать не будет).

Цитата:

Сообщение от mta88 (Сообщение 257805)
почему <style>, <title> и <meta> находятся в <body> а не в <head>?
почитайте хоть что-нибудь и потом приходите

По-моему,<body> начинается только в 16 строчке.

Faab 22.06.2013 23:36

Вам правильно написали: id должен быть уникальным. И если напишите так, то так будет работать "отлично":

$('img').hover(function(){

bes 23.06.2013 00:34

Цитата:

Сообщение от mta88
нельзя давать одинаковые id разным элементам страницы

Цитата:

Сообщение от Faab
id должен быть уникальным

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<input id="img2" name="img21">
<input id="img2" name="img22">
<script>
jQuery(function ($) {
	alert(
		$(img2).length + "\n" +
		$(img2).eq(0).attr("name") + "\n" +
		$(img2).eq(1).attr("name")
	);
});
</script>

в FF смотреть в последнюю очередь

Faab 23.06.2013 00:39

удалил код... прогон есть прогон. Созадай страницы к ссылкам, а там просто через PHP выставляй активное положение.

bes, а я на FF только и работаю. У других браузерах баг что ли выходит?
И всё равно, mta88 правильно ему сказал )))) Ты меня этим не смутил!

И почему alert считывает первые две строки, даже если индификатор без ковычек ? Должна же вылетать ошибка - ведь неправильно указан индификатор? Поясни в чём прикол.

bes 23.06.2013 01:33

при твоём способе, например, так
<?php
if (isset($_GET["id"])) $id = $_GET["id"]; else $id = "link1";
?>
<style>
a {
	opacity: 0.5;
}
#<?=$id?> {
	opacity: 1;
}
</style>
<a id="link1" href="/?id=link1">link1</a>
<a id="link2" href="/?id=link2">link2</a>

можешь также привлечь js, чтобы не писать ?id=link.. каждый раз (можно через hash), кроме того стили обычно в отдельном файле
но вообще должны быть серьёзные основания для того, чтобы запрашивать себя же через ссылку

bes 23.06.2013 01:48

Цитата:

Сообщение от Faab
bes, а я на FF только и работаю. У других браузерах баг что ли выходит?

Цитата:

Сообщение от Faab
И почему alert считывает первые две строки, даже если индификатор без ковычек ? Должна же вылетать ошибка - ведь неправильно указан индификатор? Поясни в чём прикол.

http://learn.javascript.ru/variables
см. в комментах (шучу)
Цитата:

Сообщение от Faab
И всё равно, mta88 правильно ему сказал )))) Ты меня этим не смутил!

бля сидел только и думал как бы тебя смутить :D

Faab 23.06.2013 01:48

Классное решение.

Но мне интересен факт, почему браузер не ворчит на такой синтакс:
$(img2)


Ведь реально похоже на синтакс переменной.

Faab 23.06.2013 02:12

bes
Код:

http://learn.javascript.ru/variables
Ну правильно, синтакс переменной. Это значит что если вставить не объявленную переменную, то её значение будет автоматически равно значению элемента, id которого идентично имени этой переменной?


Часовой пояс GMT +3, время: 15:43.