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