Форум

Александр83 · #21 (**permalink**) 07.03.2017, 05:24

давайте с самого начало!

Александр83 · #22 (**permalink**) 07.03.2017, 05:51

// Блок № 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;
   });
});

Александр83 · #23 (**permalink**) 07.03.2017, 05:51

// Блок № 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;
   });
});

Александр83 · #24 (**permalink**) 07.03.2017, 05:52

Простите что по два раза / у меня выходит)

Александр83 · #25 (**permalink**) 07.03.2017, 05:54

Ну вот, мой вопрос, при наведении на первый блок ссылку, подсвечивание якоря ID во втором блоке

Александр83 · #26 (**permalink**) 07.03.2017, 05:57

Подмогните пожалуйста)), уже месяц как не могу найти решение!

рони · #27 (**permalink**) 07.03.2017, 08:09

Александр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>

Александр83 · #28 (**permalink**) 07.03.2017, 08:19

не работает

рони · #29 (**permalink**) 07.03.2017, 09:04

Александр83,
при переходе с другой страницы должно подсветить. возможно вы хотите что-то иное

Александр83 · #30 (**permalink**) 07.03.2017, 09:37

нет, все находится на одной странице, без переходов, существует два блока левый и правый при наведении мышки левого блока - необходима подсветка правого элемента как на скриншоте (во вложении).

Форум

Справочник

Discord чат

Курсы javascript