Форум

obscurant · #1 (**permalink**) 18.06.2012, 14:33

Добрый день.
Сделал вкладки на tytabs. Все работает нормально, но понадобилось прикрутить одну вещь - никак не могу...
Нужно включать/выключать один див-блок вместе с вкладками, т.е. если первая вкладка активна - див-блок включен (display:block), если активна любая другая вкладка - блок выключен (display:none).

вот код:

<script type="text/javascript" src="java/tytabs.jquery.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');
				}
		}
	$('ul.tabs-navigation li:last').addClass('last');
	var int = setInterval(pressNextTab, 5000);
	});
</script>

код в html

<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">
        '.$content.'    
        </div>
        <div id="tab-2">
'.$dop.'
        </div>
        
    </div>
</div>

ну и блок, который нужно подцеплять к переключению <div class="dop_foto">
Вроде должно быть не сложно, но не силен в jQuery

Deff · #2 (**permalink**) 18.06.2012, 15:13

obscurant,
Добавляйте класс 'Active' к #dop_foto при активизации первой вкладки
Проверку делаем через if( $(this).attr("href")=='#tab-1')
и удаляйте при вкл любой другой

в css пропишите

#dop_foto {
display:none;
}
#dop_foto.Active {
display:block;
}

obscurant · #3 (**permalink**) 18.06.2012, 16:01

почему-то не получается

наверняка что-то неправильно наделал

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

Deff · #4 (**permalink**) 18.06.2012, 16:09

obscurant,
Выложите полный рабочий код
обрамите в теги [HTML run][/HTML]

obscurant · #5 (**permalink**) 18.06.2012, 16:16

ну полный код не получится - слишком много всего намешано в инет-магазине.

куски из первого поста, ну разве что подробнее

<div class="dop_foto">
<table>		
<tr>
'.$disp.'</tr>
</table>
</div>
<div style="color: #5A6666;font-size: 11px">Доступно изображений: <strong>'.$num.'</strong> </div>

Deff · #6 (**permalink**) 18.06.2012, 16:24

obscurant,

Вы можете объеденить все коды и засунуть в в один таг [HTML run][/HTML]

И дабы пример хоть как то работал здесь на странице ?
Ну убивает вылизовать исходный код каждого перед правкой

obscurant · #7 (**permalink**) 18.06.2012, 16:37

Ну вот как-то так:

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

Deff · #8 (**permalink**) 18.06.2012, 17:11

Так пойдёт ?

<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;
 }
</style>

<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(){
		if($(this).attr("href")=='#tab-1'){$('#dop_foto').show()
		}else $('#dop_foto').hide();
		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');
				}
		}
	
	$('ul.tabs-navigation li:last').addClass('last');
	
	//var int = setInterval(pressNextTab, 5000);
	});
</script>

<body>
<div class=Height_Fixed style="height:30px">
<div id="dop_foto">
<table>		
<tr><td  style="color:red">Блок, который нужно включить/выключить</td></tr>
</table>
</div>
</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>

obscurant · #9 (**permalink**) 18.06.2012, 17:14

вот! то что нужно!
спасиб огромное - выручили

Форум

Справочник

Discord чат

Курсы javascript