Показать сообщение отдельно
  #3 (permalink)  
Старый 01.08.2013, 03:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108


<!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>

Последний раз редактировалось рони, 10.12.2014 в 19:50.
Ответить с цитированием