Показать сообщение отдельно
  #7 (permalink)  
Старый 18.06.2012, 16:37
Интересующийся
Отправить личное сообщение для obscurant Посмотреть профиль Найти все сообщения от obscurant
 
Регистрация: 18.06.2012
Сообщений: 16

Ну вот как-то так:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	var tabContainers = $('.tabs-container > div');
	
	
	tabContainers.hide().filter(':first').show();

	$('ul.tabs-navigation li a').click(function(){
		tabContainers.hide();
		tabContainers.filter(this.hash).show();
		$('ul.tabs-navigation a').parent('li').removeClass('selected');
		$(this).parent('li').addClass('selected');
		return false;
		}).filter(':first').click();
	
	
	function pressNextTab(){
		if ($('ul.tabs-navigation li.selected').hasClass('last')){
			$('ul.tabs-navigation li:first').find('a').trigger('click');
			}else{
				$('ul.tabs-navigation li.selected').next('li').find('a').trigger('click');
				}
		}
	

	var dop_f = $('#dop_foto');
	
	if( $(this).attr("href")=='#tab-1')
	{
		dop_f.addClass('Active');
	}
	if( $(this).attr("href")=='#tab-2')
	{
		dop_f.removeClass('Active');
	}
	


	
	$('ul.tabs-navigation li:last').addClass('last');
	
	//var int = setInterval(pressNextTab, 5000);
	});
</script>
<style type="text/css">

.tabs-container{
	padding: 20px;
	/*border: 1px solid #448abb*/
	}
.tabs-navigation{
	margin: 0;
	height: 20px;
	}
.tabs-navigation li{
	float: left;
	list-style: none;
	}
.tabs-navigation li a{
	display: block;
	margin: 0 1px;
	padding: 0 15px;
	height: 20px;
	color: #448abb;
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
	border: 1px solid #448abb
	}
.tabs-navigation li.selected a, .tabs-navigation li:hover a{
	color: #fff;
	background: #448abb;
	}
	
#dop_foto {
	display:none;
 }
#dop_foto.Active {
	display:block;
 }	
</style>

<body>

<div class="dop_foto">
<table>		
<tr>
<td>Блок, который нужно включить/выключить</td></tr>
</table>
</div>


<div id="tabs">
    <ul class="tabs-navigation">
        <li><a href="#tab-1">Описание</a></li>
        <li><a href="#tab-2">Дополнения</a></li>
        
    </ul>
    <div class="tabs-container">
        <div id="tab-1">
        Тра-ля-ля   
        </div>
        <div id="tab-2">
        1111111111
        </div>
        
    </div>
</div>



</body>
Ответить с цитированием