VPF::Эмуляция наведения на ссылку - Форум программистов

Jazzzz

Дата 5.4.2012, 13:59 (ссылка)

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

Загрузка ...

Новичок

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

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

Вопрос такой... Имеется два столбца. В обоих столбиком находятся ссылки. Мне нужно, чтобы при наведении на ссылку из левого столбца эмулировалось наведение на некоторые ссылки (!) в правом столбце (у ссылок в правом столбце оформлен красивый css стиль). Как это можно реализовать?

ksnk

Дата 5.4.2012, 15:57 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

на javascript.
К примеру "наведение" будет отображаться классом selected

Разметка - что-то типа

Код


<div id="First_cells"><a id="x1" href="#">...</a><a id="x2" href="#">...</a> ...</div>

<div id="Second_cells"><a class="x1 x2" href="#">...</a><a class="x2" href="#">...</a> ...</div>

То есть, при выборе ссылки с ID=XXX будут отмечены все ссылки второго столбца с классом XXX.

Код


$(function(){
  $('#First_cells a').hover(function(){
     var _id=this.id;
     if(!_id) return;
     $('#Second_cells a.selected').not('.'+_id).removeClass('selected');
     $('#Second_cells a.'+_id).addClass('selected');
  },function(){
     $('#Second_cells a.selected').removeClass('selected');
  })
})

Это сообщение отредактировал(а) ksnk - 6.4.2012, 10:26

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Aliance

Дата 6.4.2012, 09:42 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

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

ksnk, в 4 строчке, похоже, все же используется не та переменная.

Вопрос автору: а зачем такое могло понадобится?

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

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Jazzzz

Дата 6.4.2012, 09:44 (ссылка)

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

Загрузка ...

Новичок

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

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

Большое спасибо за ответ, но что-то не получается...
Вот мой код. Не могли бы вы раскидать все это по коду...

Код


<table border="0"> 
    <tbody> 
        <tr> 
            <td style="width: 450px; height: 300px;" align="left" valign="top"> 
                <p>ГОСУДАРСТВЕННЫЕ И МУНИЦИПАЛЬНЫЕ ОРГАНИЗАЦИИ</p> 
                <a href="#"> - Рога и копыта</a> <br /> 
                 - Копыта и рога<br /> 
                <p>МЕЖДУНАРОДНЫЕ ОРГАНИЗАЦИИ</p> 
                - Рога и копыта <br /> - Копыта и рога<br /> 
                <p>ПРОМЫШЛЕННЫЕ ПРЕДПРИЯТИЯ</p> 
                - Рога и копыта <br /> - Копыта и рога<br /> 
                <p>НЕКОММЕРЧЕСКИЕ И ОБЩЕСТВЕННЫЕ ОРГАНИЗАЦИИ</p> 
                - Рога и копыта <br /> - Копыта и рога<br /> 
                <p>ТОРГОВЫЕ ПРЕДПРИЯТИЯ</p> 
                - Рога и копыта <br /> - Копыта и рога<br /> 
                <p>ПРЕДПРИЯТИЯ СФЕРЫ УСЛУГ</p> 
                - Рога и копыта <br /> - Копыта и рога<br /> <br /><br /></td> 
            <td style="width: 5px; height: 300px;" align="left" valign="top" bgcolor="#cccccc"> 
                <p>&nbsp;</p> 
            </td> 
            <td align="right" valign="top" style="width: 450px;"> 
                <div class="groups_main"> 
                    <div class="groupItem last"> 
                        <ul> 
                            <li><a href="#">АБОНЕНТСКОЕ ОБСЛУЖИВАНИЕ</a></li> 
                            <li><a href="#">PR-КАМПАНИИ</a></li> 
                            <li><a href="#">РЕКЛАМНЫЕ КАМПАНИИ</a></li> 
                            <li><a href="#">СВЯЗИ СО СМИ</a></li> 
                            <li><a href="#">КОПИРАЙТ</a></li> 
                            <li><a href="#">МЕРОПРИЯТИЯ</a></li> 
                            <li><a href="#">ДИЗАЙН-СТУДИЯ</a></li> 
                            <li><a href="#">ОПЕРАТИВНАЯ ПОЛИГРАФИЯ</a></li> 
                            <li><a href="#">РАЗРАБОТКА САЙТОВ</a></li> 
                            <li><a href="#">СУВЕНИРНАЯ ПРОДУКЦИЯ</a></li> 
                        </ul> 
                    </div> 
                </div> 
            </td> 
        </tr> 
    </tbody> 
</table>

Добавлено через 6 минут и 5 секунд

Цитата(Aliance @ 6.4.2012, 09:42

)

а зачем такое могло понадобится

В идеале должно получиться так: в левом столбце подпунктами будут названия организаций, и при наведении на одну из них будут подсвечиваются виды работ, выполненных для данного предприятия. В то-же время названия организаций являются ссылками на определенные страницы, также как и виды работ ведут куда-то.

ksnk

Дата 6.4.2012, 10:33 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Цитата(Aliance @ 6.4.2012, 09:42

)

в 4 строчке, похоже, все же используется не та переменная.

Угу. исправил.

Цитата(Jazzzz @ 6.4.2012, 09:44

)

но что-то не получается

А что делалось?

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Jazzzz

Дата 6.4.2012, 11:37 (ссылка)

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

Загрузка ...

Новичок

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

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

Вот код, как я написал "на коленке":

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
$(function(){
  $('#First_cells a').hover(function(){
     var _id=this.id;
     if(!_id) return;
     $('#Second_cells a.selected').not('.'+_id).removeClass('selected');
     $('#Second_cells a.'+_id).addClass('selected');
  },function(){
     $('#Second_cells a.selected').removeClass('selected');
  })
})
</script>
<title>Документ без названия</title>
</head>

<body>
<style type="text/css">
.groups_main .groupItem { float:right; width:100%;}
.groups_main ul { list-style: none outside none; font-size:13px; float:right; width:250px;}
.groups_main li a { padding:2px 6px; display:block;}
.groups_main li a:hover { background-color:#4196FE; color:#fff; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; text-decoration:none;}
</style>



<table width="700" border="1">
  <tr>
    <td width="224">
    <div id="First_cells"><a id="x1" href="#">Ссылка1</a><a id="x2" href="#">...</a> ...</div>
    <div id="First_cells"><a id="x1" href="#">Ссылка2</a><a id="x2" href="#">...</a> ...</div>
    <div id="First_cells"><a id="x1" href="#">Ссылка3</a><a id="x2" href="#">...</a> ...</div>
    
    
    </td>
    <td width="367">
     <div class="groups_main">
                    <div class="groupItem last">
                    <ul>
                    <li>
    <div id="Second_cells"><a class="x1 x2" href="#">Ссылка1</a><a class="x2" href="#">...</a> ...</div></li>
    
    <li><div id="Second_cells"><a class="x1 x2" href="#">Ссылка2</a><a class="x2" href="#">...</a> ...</div></li>
    
    <li><div id="Second_cells"><a class="x1 x2" href="#">Ссылка3</a><a class="x2" href="#">...</a> ...</div></li>
    </ul>
    </div>
    </div>
    
    </td>
  </tr>
</table>

</body>
</html>

ksnk

Дата 6.4.2012, 12:33 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Ну, дык оно практически работает. Нужно только определить класс для ссылок с классом selected

http://jsfiddle.net/V9MRd/

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Jazzzz

Дата 6.4.2012, 13:26 (ссылка)

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

Загрузка ...

Новичок

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

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

Цитата(ksnk @ 6.4.2012, 12:33

)

http://jsfiddle.net/V9MRd/

А как там посмотреть html-код? Ты же как-то таблицу засунул. Она же видна в окне результата. И не мог бы ты все-таки в моем коде все это распихать как-нибудь... smile

Это сообщение отредактировал(а) Jazzzz - 6.4.2012, 13:27

ksnk

Дата 6.4.2012, 14:32 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Там 3 части исходников
Вверху-слева - HTML - его нужно разместиьт внутри тего body
Внизу слева - Javascript - его нужно поместить в секцию header в тег script.
Вверху-справа - CSS - его нужно поместить в секцию header в тег style

по флажкам понятно, что придется подкюлючить еше и jquery

если объяснения слишком сложны - можно ткнуть правой кнопкой в окно результата (справа-снизу) и выбрать "просмотр кода фрейма"

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Jazzzz

Дата 9.4.2012, 07:16 (ссылка)

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

Загрузка ...

Новичок

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

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

Большое спасибо, все работает.
Плохо только то, что получается ссылка в ссылке, и если провести курсором между строк правого столбца, то видно, что там еще как бы ссылка без текста. Но думаю это незаметно. Вот примерно как у меня получилось:

Код


<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>

  
  <style type='text/css'>
    .groups_main .groupItem { float:right; width:100%;}
.groups_main ul { list-style: none outside none; font-size:13px; float:right; width:250px;}
.groups_main li a { padding:2px 6px; display:block;}
.groups_main li a:hover, .groups_main li a.selected { background-color:#4196FE; color:#fff; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; text-decoration:none;}
  </style>
  


<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function(){
  $('#First_cells a').hover(function(){
     var _id=this.id;
     if(!_id) return;
     $('#Second_cells a.selected').not('.'+_id).removeClass('selected');
     $('#Second_cells a.'+_id).addClass('selected');
  },function(){
     $('#Second_cells a.selected').removeClass('selected');
  })
})
});//]]>  

</script>


</head>
<body>
  
<table width="700" border="1">
  <tr>
    <td width="224">
    <div id="First_cells"><a id="x3" href="#">Ссылка1</a><a id="x2" href="#"></a></div>
    <div id="First_cells"><a id="x22" href="#">Ссылка2</a><a id="x2" href="#"></a></div>
    <div id="First_cells"><a id="x1" href="#">Ссылка3</a><a id="x2" href="#"></a></div>
    
    
    </td>
    <td width="367">
     <div class="groups_main">
                    <div class="groupItem last">
                    <ul>
                    <li>
    <div id="Second_cells"><a class="x1 x22" href="#">бугага1</a><a class="x2" href="#"></a></div></li>
    
    <li><div id="Second_cells"><a class="x1 x3" href="#">бугага2</a><a class="x2" href="#"></a></div></li>
    
    <li><div id="Second_cells"><a class="x1 x22" href="#">бугага3</a><a class="x2" href="#"></a></div></li>
    </ul>
    </div>
    </div>
    
    </td>
  </tr>
</table>


  
</body>


</html>

Это сообщение отредактировал(а) Jazzzz - 9.4.2012, 07:20

ksnk

Дата 9.4.2012, 07:35 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Цитата(Jazzzz @ 9.4.2012, 07:16

)

то видно, что там еще как бы ссылка без текста

Цитата(Jazzzz @ 9.4.2012, 07:16

)

Эта, чтоли? А зачем она там такая? Без текста? И кто ее туда вставил?

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Jazzzz

Дата 9.4.2012, 07:46 (ссылка)

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

Загрузка ...

Новичок

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

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

Пардон, это я похоже ступил... smile

Спасибо еще раз. Лишнее убрал, все работает как надо.

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