Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 07.03.2017, 05:24
Аватар для Александр83
Аспирант
Отправить личное сообщение для Александр83 Посмотреть профиль Найти все сообщения от Александр83
 
Регистрация: 06.03.2017
Сообщений: 91

давайте с самого начало!
Ответить с цитированием
  #22 (permalink)  
Старый 07.03.2017, 05:51
Аватар для Александр83
Аспирант
Отправить личное сообщение для Александр83 Посмотреть профиль Найти все сообщения от Александр83
 
Регистрация: 06.03.2017
Сообщений: 91

// Блок № 1 наведение на ссылку перехода по якорю

<table class="tab_01" width="100%" height="100%">
  <tr>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_001.'" class="'.$dataItem->tab_001.'">' .$dataItem->tab_001. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_002.'" class="'.$dataItem->tab_002.'">' .$dataItem->tab_002. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_003.'" class="'.$dataItem->tab_003.'">' .$dataItem->tab_003. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_004.'" class="'.$dataItem->tab_004.'">' .$dataItem->tab_004. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_005.'" class="'.$dataItem->tab_005.'">' .$dataItem->tab_005. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_006.'" class="'.$dataItem->tab_006.'">' .$dataItem->tab_006. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_007.'" class="'.$dataItem->tab_007.'">' .$dataItem->tab_007. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_008.'" class="'.$dataItem->tab_008.'">' .$dataItem->tab_008. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_009.'" class="'.$dataItem->tab_009.'">' .$dataItem->tab_009. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_010.'" class="'.$dataItem->tab_010.'">' .$dataItem->tab_010. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_011.'" class="'.$dataItem->tab_011.'">' .$dataItem->tab_011. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_012.'" class="'.$dataItem->tab_012.'">' .$dataItem->tab_012. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_013.'" class="'.$dataItem->tab_013.'">' .$dataItem->tab_013. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_014.'" class="'.$dataItem->tab_014.'">' .$dataItem->tab_014. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_015.'" class="'.$dataItem->tab_015.'">' .$dataItem->tab_015. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_016.'" class="'.$dataItem->tab_016.'">' .$dataItem->tab_016. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_017.'" class="'.$dataItem->tab_017.'">' .$dataItem->tab_017. '</a>'; ?></td>
  </tr>
</table>

// Блок № 2 подсвечивание ссылки

<div class="op_01">
<a id="<?php echo $product->product_sku; ?>" class="op_02"
title="<?php echo $product->product_name; ?>">
&nbsp;<?php echo $product->product_sku; ?>&nbsp;
<?php echo shopFunctionsF::
limitStringByWord($product->product_name,'17','...'); ?></a>
</div>
<?php 
$block_hover = $product->product_sku;
?>


#<?php echo $block_hover; ?>:hover{
    color: #fff;
    text-decoration: none;
    background: #0033FF;
    display: block;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    border: 1px solid #0033FF;
}
a.<?php echo $block_hover; ?>:hover{
    color: #fff;
    text-decoration: none;
    background: #0033FF;
    display: block;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    border: 1px solid #0033FF;
}
a.<?php echo $block_hover; ?> {
    font-size: 13px;
    background: #666;
    text-align: center;
    color: #fff;
    text-decoration: none;
    border-color: #000;
    border-radius: 2px;
    position: relative;
    display: block;
}
.active_hover{
    background: #0033FF;
}


// Плавная прокрутка до якоря

jQuery(document).ready(function() {
   jQuery('a[href^="#<?php echo $block_hover; ?>"]').click(function(){
      var target = jQuery(this).attr('href');
      jQuery('html, body').animate({scrollTop: jQuery(target).offset().top - 120}, 800);
      return false;
   });
});
Ответить с цитированием
  #23 (permalink)  
Старый 07.03.2017, 05:51
Аватар для Александр83
Аспирант
Отправить личное сообщение для Александр83 Посмотреть профиль Найти все сообщения от Александр83
 
Регистрация: 06.03.2017
Сообщений: 91

// Блок № 1 наведение на ссылку перехода по якорю

<table class="tab_01" width="100%" height="100%">
  <tr>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_001.'" class="'.$dataItem->tab_001.'">' .$dataItem->tab_001. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_002.'" class="'.$dataItem->tab_002.'">' .$dataItem->tab_002. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_003.'" class="'.$dataItem->tab_003.'">' .$dataItem->tab_003. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_004.'" class="'.$dataItem->tab_004.'">' .$dataItem->tab_004. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_005.'" class="'.$dataItem->tab_005.'">' .$dataItem->tab_005. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_006.'" class="'.$dataItem->tab_006.'">' .$dataItem->tab_006. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_007.'" class="'.$dataItem->tab_007.'">' .$dataItem->tab_007. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_008.'" class="'.$dataItem->tab_008.'">' .$dataItem->tab_008. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_009.'" class="'.$dataItem->tab_009.'">' .$dataItem->tab_009. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_010.'" class="'.$dataItem->tab_010.'">' .$dataItem->tab_010. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_011.'" class="'.$dataItem->tab_011.'">' .$dataItem->tab_011. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_012.'" class="'.$dataItem->tab_012.'">' .$dataItem->tab_012. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_013.'" class="'.$dataItem->tab_013.'">' .$dataItem->tab_013. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_014.'" class="'.$dataItem->tab_014.'">' .$dataItem->tab_014. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_015.'" class="'.$dataItem->tab_015.'">' .$dataItem->tab_015. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_016.'" class="'.$dataItem->tab_016.'">' .$dataItem->tab_016. '</a>'; ?></td>
    <td width="5.88%"><?php echo '<a href="#'.$dataItem->tab_017.'" class="'.$dataItem->tab_017.'">' .$dataItem->tab_017. '</a>'; ?></td>
  </tr>
</table>

// Блок № 2 подсвечивание ссылки

<div class="op_01">
<a id="<?php echo $product->product_sku; ?>" class="op_02"
title="<?php echo $product->product_name; ?>">
&nbsp;<?php echo $product->product_sku; ?>&nbsp;
<?php echo shopFunctionsF::
limitStringByWord($product->product_name,'17','...'); ?></a>
</div>
<?php 
$block_hover = $product->product_sku;
?>


#<?php echo $block_hover; ?>:hover{
    color: #fff;
    text-decoration: none;
    background: #0033FF;
    display: block;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    border: 1px solid #0033FF;
}
a.<?php echo $block_hover; ?>:hover{
    color: #fff;
    text-decoration: none;
    background: #0033FF;
    display: block;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    border: 1px solid #0033FF;
}
a.<?php echo $block_hover; ?> {
    font-size: 13px;
    background: #666;
    text-align: center;
    color: #fff;
    text-decoration: none;
    border-color: #000;
    border-radius: 2px;
    position: relative;
    display: block;
}
.active_hover{
    background: #0033FF;
}


// Плавная прокрутка до якоря

jQuery(document).ready(function() {
   jQuery('a[href^="#<?php echo $block_hover; ?>"]').click(function(){
      var target = jQuery(this).attr('href');
      jQuery('html, body').animate({scrollTop: jQuery(target).offset().top - 120}, 800);
      return false;
   });
});
Ответить с цитированием
  #24 (permalink)  
Старый 07.03.2017, 05:52
Аватар для Александр83
Аспирант
Отправить личное сообщение для Александр83 Посмотреть профиль Найти все сообщения от Александр83
 
Регистрация: 06.03.2017
Сообщений: 91

Простите что по два раза / у меня выходит)
Ответить с цитированием
  #25 (permalink)  
Старый 07.03.2017, 05:54
Аватар для Александр83
Аспирант
Отправить личное сообщение для Александр83 Посмотреть профиль Найти все сообщения от Александр83
 
Регистрация: 06.03.2017
Сообщений: 91

Ну вот, мой вопрос, при наведении на первый блок ссылку, подсвечивание якоря ID во втором блоке
Ответить с цитированием
  #26 (permalink)  
Старый 07.03.2017, 05:57
Аватар для Александр83
Аспирант
Отправить личное сообщение для Александр83 Посмотреть профиль Найти все сообщения от Александр83
 
Регистрация: 06.03.2017
Сообщений: 91

Подмогните пожалуйста)), уже месяц как не могу найти решение!
Ответить с цитированием
  #27 (permalink)  
Старый 07.03.2017, 08:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,569

Александр83,
<script>
jQuery(document).ready(function() {
  jQuery('a[href^="#<?php echo $block_hover; ?>"]').click(function(){
    var target = jQuery(this).attr('href');
    jQuery('html, body').animate({scrollTop: jQuery(target).offset().top - 120}, 800);
    return false;
  });
*!*
var hash = window.location.hash;
 hash &&  jQuery(hash).addClass("active_hover")
*/!*

});

  </script>
Ответить с цитированием
  #28 (permalink)  
Старый 07.03.2017, 08:19
Аватар для Александр83
Аспирант
Отправить личное сообщение для Александр83 Посмотреть профиль Найти все сообщения от Александр83
 
Регистрация: 06.03.2017
Сообщений: 91

не работает
Ответить с цитированием
  #29 (permalink)  
Старый 07.03.2017, 09:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,569

Александр83,
при переходе с другой страницы должно подсветить. возможно вы хотите что-то иное
Ответить с цитированием
  #30 (permalink)  
Старый 07.03.2017, 09:37
Аватар для Александр83
Аспирант
Отправить личное сообщение для Александр83 Посмотреть профиль Найти все сообщения от Александр83
 
Регистрация: 06.03.2017
Сообщений: 91

нет, все находится на одной странице, без переходов, существует два блока левый и правый при наведении мышки левого блока - необходима подсветка правого элемента как на скриншоте (во вложении).
Изображения:
Тип файла: jpg Новый точечный рисунок.jpg (17.8 Кб, 2 просмотров)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поставить галочку в нужном чекбоксе, при переходе с другой страницы mazalmaz Общие вопросы Javascript 8 11.11.2015 10:46
Выделение строки <select> при выборе checkbox DarkMaster13 Общие вопросы Javascript 4 14.04.2014 03:30
Включение <input type="radio"> при клике на а люьую область строки. Vel Общие вопросы Javascript 2 24.06.2009 21:39
Выделение строки <select> при выборе другого <select> simbion Элементы интерфейса 12 05.05.2009 03:43
Подсветка выделенной строки в таблице (row table highlight) artsage Элементы интерфейса 4 03.04.2009 06:40