| |
|
|
| | Здравствуйте,уважаемые знатоки.
Помогите,пожалуйста, реализовать скрипт...
Есть кнопка,которая находится в меню:
<a href="http://www.localhost/sofia/index.php?action=showMainPageForum" style="color:#5c0144; text-decoration:none" ><img src="images/menu/forum1.png" onmouseover="this.src='images/menu/forum2.png';" onmouseout="this.src='images/menu/forum1.png';" /></a>
|
Нужно сделать так, чтобы при нажатии на этот пункт меню,делалось это:
<div id="boxfor">
{content}
</div>
|
иначе
<div id="box">
{content}
</div>
|
| |
| |
|
|
| |
|
|
| |
для: mzpl
(18.03.2011 в 18:10)
| | | Приведу пример как это можно сделать с использованием jQuery. Как это сделать без неё на чистом JavaScript я уже не помню :)
<html>
<head>
<style type='text/css'>
/*Стили для блока пока на кнопку не нажали*/
DIV#box {
...
}
/*Дополнительные стили, которые должны быть применены к блоку когда на кнопку нажмут*/
DIV.active {
...
}
</style>
<!-- Сначала присоединим файл jQuery -->
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
//При наведение курсора на изображение отрабатывает первая функция, после отведения - вторая.
//Каждая функция устанавливает своё значение атрибута src у изображения
$("IMG#button").hover(function() {
$(this).attr("src", "'images/menu/forum2.png");
},
function() {
$(this).attr("src", "'images/menu/forum1.png");
});//end of hover()
//По клику на изображение отрабатывает эта функция, которая добавляет класс "active" блоку DIV#box
$("IMG#button").click(function() {
$(DIV#box).addClass("active");
});//end of click()
});//end of ready()
</script>
</head>
<body>
<img src="images/menu/forum1.png" id='button' />
<div id='box'>{content}</div>
</body>
</html>
|
Я немного изменил структуру идентификаторов/классов. Но можно и ваш вариант оставить, если он вам кажется более семантичным. | |
| |
|
|
| |
|
|
| |
для: Ирбис
(18.03.2011 в 19:18)
| | | Спасибо большое,буду пробовать))) | |
| |
|
|
| |
|
|
| |
для: mzpl
(18.03.2011 в 19:27)
| | | Пожалуйста!
Я в своём примере разделил HTML и JavaScript код - так правильнее. Ещё лучше вынести JS код в отдельный файл, а в HTML странице просто его подключить после jQuery. При такой организации кода вам будет проще вносить изменения и представлять общую картину (особенно эта разница ощутима тогда, когда кода много).
Если же вам проще, когда JS и HTML смешаны друг с другом (как в первоначальном варианте), то можно переписать код так:
<html>
<head>
<style type='text/css'>
/*Стили для блока пока на кнопку не нажали*/
DIV#box {
...
}
/*Дополнительные стили, которые должны быть применены к блоку когда на кнопку нажмут*/
DIV.active {
...
}
</style>
<!-- Сначала присоединим файл jQuery -->
<script type='text/javascript' src='jquery.js'></script>
</head>
<body>
<img src="images/menu/forum1.png"
id="button"
onmouseover="$(this).attr('src', 'images/menu/forum2.png')"
onmouseout="$(this).attr('src', 'images/menu/forum1.png')"
onclick="$('DIV#box').addClass('active')" />
<div id="box">
{content}
</div>
</body>
</html>
|
Если что-то не будет получаться - пишите, разберёмся ;) | |
| |
|
|
