Форум

Alex57B · #1 (**permalink**) 01.08.2013, 02:09

Всем привет!
У меня такая дилема образовалась.
Есть страница с прайс-листами. Прайс листы находятся в таблицах которые расположены в табах:
javascript:

(function($) {
$(function() {

  $('ul.maintabs').on('click', 'li:not(.currentabs)', function() {
    $(this).addClass('currentabs').siblings().removeClass('currentabs')
      .parents('div.sectiontabs').find('div.boxtabs').eq($(this).index()).fadeIn(150).siblings('div.boxtabs').hide();
  })

})
})

Код на странице прайс-листов

<div class="sectiontabs">

<ul class="maintabs">
	<li>Цены 1</li>
	<li>Цены 2</li>
</ul>
<!-- Таб 1 -->
<div class="boxtabs">
<h3 style="text-align: center;">Цены 1</h3>
<table style="font-size: 11px; line-height: 14px;" width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td style="text-align: center;" colspan="2" valign="top" width="100%">
<!-- Цена 1 -->
<h4>цена товара 1</h4>
</td>
</tr>
</table>
</div>

<!-- Таб 2 -->
<div class="boxtabs">
<h3 style="text-align: center;">Цены 2</h3>
<table style="font-size: 11px; line-height: 14px;" width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td style="text-align: center;" colspan="2" valign="top" width="100%">
<!-- Цена 2 -->
<h4>Цена товара 2</h4>
</td>
</tr>
</table>
</div>
</div>

Как сделать якорь в ссылке чтобы при переходе открывался "Таб 2" и переходил к строке "Цена товара 2"?

PS просто HTML не предлагать

Deff · #2 (**permalink**) 01.08.2013, 02:24

Непонятно что нужно - и почему не устраивает HTML ?
Ибо есть псевдокласс target => http://htmlbook.ru/css/target

Cделайте эскиз произходящего - до и после

рони · #3 (**permalink**) 01.08.2013, 03:51

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script>
$(function () {
    $('ul.maintabs')
        .on('click', 'li:not(.currentabs)', function () {
            $(this)
                .addClass('currentabs')
                .siblings()
                .removeClass('currentabs')
                .parents('div.sectiontabs')
                .find('div.boxtabs')
                .eq($(this)
                    .index())
                .fadeIn(150)
                .siblings('div.boxtabs')
                .hide();
        })
    $('ul.maintabs li')
        .each(function (indx, element) {
            var text = element.firstChild;
            $(text)
                .replaceWith($('<a/>', {
                    text: text.data,
                    href: '#price_' + indx
                }))
            $('.sectiontabs h4')
                .eq(indx)
                .attr('id', 'price_' + indx);
 if(window.location.hash == '#price_' + indx) $(this).click();

        });
})
 </script>
 <style type="text/css">
 .currentabs {
   background-color: #FFD700;
 }

 body{
   height: 1000px;
 }
h4:target {
    background: #00FF00;
   }
li a{
  text-decoration:  none;
  color: #000000;
}
  .boxtabs{
    display: none;
  }
 </style>
</head>

<body>
<div class="sectiontabs">

<ul class="maintabs">
	<li>Цены 1</li>
	<li>Цены 2</li>
</ul>
<!-- Таб 1 -->
<div class="boxtabs">
<h3 style="text-align: center;">Цены 1</h3>
<table style="font-size: 11px; line-height: 14px;" width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td style="text-align: center;" colspan="2" valign="top" width="100%">
<!-- Цена 1 -->
<h4 >цена товара 1</h4>
</td>
</tr>
</table>
</div>

<!-- Таб 2 -->
<div class="boxtabs">
<h3 style="text-align: center;">Цены 2</h3>
<table style="font-size: 11px; line-height: 14px;" width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td style="text-align: center;" colspan="2" valign="top" width="100%">
<!-- Цена 2 -->
<h4>Цена товара 2</h4>
</td>
</tr>
</table>
</div>
</div>

</body>

</html>

Alex57B · #4 (**permalink**) 01.08.2013, 18:44

рони спасибо вам за ответ, но это не то что мне нужно. Вероятно я неправильно выразился. Попробую снова.

Есть две разных страницы на сайте:
1. Описание услуги (бла бла бла установка смесителя обращайтесь к нам)
2. Цены на услуги (цены расположены в таблицах которые в свою очередь находятся в табах)

Задача:
На странице 1 я размещаю ссылку вида:

<a href="/ceny-na-uslugi/#cena-ustanovki-smesitelya">Узнать цену</a>

А на странице 2 прайсы, код:

<div class="sectiontabs">

<ul class="maintabs">
	<li>Цены 1</li>
	<li>Цены 2</li>
</ul>
<!-- Таб 1 -->
<div class="boxtabs">
<h3 style="text-align: center;">Цены 1</h3>
<table style="font-size: 11px; line-height: 14px;" width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<!-- Цена 1 -->
<td style="text-align: center;" colspan="2" valign="top" width="100%">
цена товара 1
</td>
</tr>
</table>
</div>

<!-- Таб 2 -->
<div class="boxtabs">
<h3 style="text-align: center;">Цены 2</h3>
<table style="font-size: 11px; line-height: 14px;" width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<!-- Цена 2 -->
<td id="cena-ustanovki-smesitelya" style="text-align: center;" colspan="2" valign="top" width="100%">
Цена товара 2
</td>
</tr>
</table>
</div>
</div>

Чтобы при переходе по ссылке со страницы 1 открывалась страница 2 и переключался таб 2 с прокруткой до <td> с id="cena-ustanovki-smesitelya"

И чтобы соответственно табы остались рабочими, т.е. можно было переключаться по ним.

Яваскрипт тот же, из поста номер один

рони · #5 (**permalink**) 10.12.2014, 19:53

Alex57B,
добавлен переход по hash пост 3

Alex57B · #6 (**permalink**) 10.12.2014, 20:43

рони,
Спасибо большое. Все получилось как и хотел

Форум

Справочник

Discord чат

Курсы javascript