VPF::[JavaScript] Появление DIV при нажатии ссылки

86region

Дата 28.4.2010, 09:12 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 28.4.2010

Репутация: нет
Всего: нет

Есть вот такой вот скрипт - http://www.position-relative.net/creation/fadeslider/

Как видно в нем реализована возможность при нажатии на ссылку внизу выплывает блок DIV.
Нужно сделать так чтобы ссылки были подряд и при нажатии появлялся DIV соответствующей ссылки. Примерно это выглядит так - http://users.aber.ac.uk/rpc7/menufaderandslider/ , но здесь реализовано при нажатии на картинки.

Код


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Титульная страница</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="js/jquery.js" type="text/javascript"></script>
        <script src="js/jquery.fadeSliderToggle.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $(".fadeNews").click(function(){   
                $(this).next().fadeSliderToggle()
                 return false;
            })
        });    
        </script>
        <style>
            .fader{opacity:0;display:none;}



#link1 {
    display:block;
    }
#link2 {
    display: none;
    }
#link3 {
    display: none;
    }
#link4 {
    display: none;
    }
#link5 {
    display: none;
    }
        </style>
</head>

<body>
<div id="pageMain" style="display:block";>

<!-- start header -->
<div class="header";>
<table style="margin-top:14px;" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td rowspan="2"  width="10%">&nbsp;</td>
    <td rowspan="2">&nbsp;</td>
    <td><div align="center" style="font-size:36px; margin-top:25px;">Департамент</div></td>
    <td rowspan="2" width="20%">&nbsp;</td>
  </tr>
  <tr>
    <td>
    <p align="center"><img src="img/line.jpg" width="397" height="15"></p>
    <div align="center" style=" margin-top:45px;">
  <a href="#" style="white-space: no-wrap; font-size:20px;">Ссылка1</a>&nbsp;&nbsp;&nbsp;
  <a href="#" style="white-space: no-wrap; font-size:20px;">Ссылка2</a>&nbsp;&nbsp;&nbsp;
  <a href="#" style="white-space: no-wrap; font-size:20px;">Ссылка3</a>&nbsp;&nbsp;&nbsp;
  <a href="#" style="white-space: no-wrap; font-size:20px;">Ссылка4</a>&nbsp;&nbsp;&nbsp;
  <a href="#" style="white-space: no-wrap; font-size:20px;">Ссылка5</a>
</div>
</td>
    </tr>
</table>

<!-- Content S--><div>

<div id="link1">link1 info</div>
<div id="link2" class="fader">link2 info</div>
<div id="link3">link3 info</div>
<div id="link4">link4 info</div>
<div id="link5">link5 info</div>


</div><!-- Content E -->

</div>
<!-- end header -->
 
 
 
</div>
</body>
</html>

Смысл что при нажатии Ссылоки появлялся внизу DIV link1. Пробовал по аналогии как-то сделать, ничего не вышло :(

Изначально DIV Link1 display: block чтобы видеть его, а остальные display: none. При нажатии на ссылку получается что все кроме DIV этой линки display: none а он display:block

Я совершенно не разбираюсь в программировании, но мне это очень нужно! Помогите пожалуйста

Это сообщение отредактировал(а) 86region - 28.4.2010, 10:49

mr.Anderson

Дата 28.4.2010, 10:30 (ссылка)

(нет голосов)

Загрузка ...

iOS Lead Developer

Профиль
Группа: Участник Клуба
Сообщений: 3374
Регистрация: 20.12.2004
Где: далеко

Репутация: 16
Всего: 128

!
mr.Anderson

Модератор: название темы должно отражать ее суть!

--------------------

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Центр помощи \| Следующая тема »