Действие click зависит от выбранной вкладки

[chelkaz]

Добрый день! Прошу помощи. Застрял в одном месте...
Соорудил такую конструкцию, в ней название кнопки зависит от выбранной вкладки (таба), я сделал это так:

$('#sovet').click(function(){
document.getElementById('txt-btn').innerHTML = "НАЗВАНИЕ КНОПКИ-1"
});	
$('#foto').click(function(){
document.getElementById('txt-btn').innerHTML = "НАЗВАНИЕ КНОПКИ-2"
});

А вот в теле таба (блока), где на картинке написано "содержимое блока" то, что загружается при клике на кнопку. В данном случаи это файл «fun.php» Я сделал так:

$('#btn-rnd').click(function(){
	$('#rnd').animate({'opacity':0}, 500, function(){
		$('#rnd').load('fun.php');
		$('#rnd').animate({'opacity':1}, 500);
			}) 
 setTimeout(2000);

Вопрос следующий, в данном примере работает как нужно смена названии кнопки и загрузка файла «fun.php» в таб. Но как сделать так, что бы в каждый таб загружался свой файл. То есть загружаемый файл должен меняться от того, какая вкладка выбрана. Например для первой «fun.php», для второй «fun-2.php» для третий «fun-3.php» И соответственно загружаться во вкладку тогда, когда происходит клик на кнопку.

[ruslan_mart]

Можно дать каждому табу уникальный ID, типа такого: tab-1, tab-2, tab-3 и т.д. А дальше так, например:

var rnd = $('#rnd');

$('[id^="tab-"]').click(function() {

   var id = this.id.split('-')[1];

   rnd.fadeOut(500, function() {
      $(this).load('fun-' + id + '.php').fadeIn(500);
   });
});

[chelkaz]

var rnd = $('#rnd');

$('[id^="tab-"]').click(function() {

   var id = this.id.split('-')[1];

   rnd.fadeOut(500, function() {
      $(this).load('fun-' + id + '.php').fadeIn(500);
   });
});

Так, спасибо. Здесь, так как я делаю сам и очень еще слаб в JS мне ясно следующее... Кликнув по любому из элементов у которого начало ID равно tab- мы загрузим в таб файл fun- с тем номером, который содержится во вкладке. Так я понял? Загрузка нужного файла fun- должна производиться по клику на кнопку с ID #btn-rnd. Я думаю, хотя возможно это через зад) Узнать какая вкладка активна, а затем условие, вроде - Если вкладка tab-1 то если click #btn-rnd тогда load файл fun-1 иначе ...

[chelkaz]

Я сделал просто... При клике на таб я присваиваю переменной адрес:

$('#sovet').click(function(){
document.getElementById('txt-btn').innerHTML = "Название кнопки"
$url = "fun.php";
});

И после по клику на кнопку так:

$('#btn-rnd').click(function(){
	urls = $url;
			$('#rnd').animate({'opacity':0}, 500, function(){
					$('#rnd').load(urls);
					$('#rnd').animate({'opacity':1}, 500);
			}) 
 setTimeout(2000);
});

Осталось сделать проверку на пустоту $url и если она пустая присвоить ссылку по умолчанию... Если можно это все сделать проще, то пишите.

[chelkaz]

И в конец... Определение сделал так:

if (typeof $url != 'undefined');
else $url = "fun.php";

Теперь все работает как нужно, но насколько это правильно написано, или может наоборот через зад решайте сами) А лучше пишите здесь...

[chelkaz]

Теперь не разберусь, почему так не работает условие. Это я написал для проверки того, что загружать в таб:

$('#btn-rnd').click(function(){


if(typeof $url != 'undefined')
					$url = "fun.php";	
	    			$('#rnd').animate({'opacity':0}, 500, function(){
					$('#rnd').load($url);
					$('#rnd').animate({'opacity':1}, 500);
								}) 
 					setTimeout(2000);
		
			else
if($url = 'fun.php')
	    			$('#rnd').animate({'opacity':0}, 500, function(){
					$('#rnd').load($url);
					$('#rnd').animate({'opacity':1}, 500);
								}) 
 					setTimeout(2000);
			else
if($url = 'foto.php')
	    			$('#foto').animate({'opacity':0}, 500, function(){
					$('#foto').load($url);
					$('#foto').animate({'opacity':1}, 500);
								}) 
 					setTimeout(2000);

});

[ruslan_mart]

chelkaz, что я не совсем понял Вас. Сначала кликаем по табу, но ничего не должно загружаться, потом кликаем по кнопке и загружается контент зависимо от выбранного таба, так?

[chelkaz]

Нет, загрузка идет только по клику по кнопке. Я все сделал, но загвоздка в рандомнасти. То есть нужно что бы загружался всегда разный файл. Я сделал так: Получаю кол-во файлов в директории:

<php
$path = 'txt'; // название папки
$dir = opendir ("$path");
$i = 0; // создаём переменную для цикла
while (false !== ($file = readdir($dir))) {
      if (strpos($file, '.html',1) ) {
      $i++;
  }
}
?>

Затем создаю массив с кол-вом, где ch равна количеству файлов в директории:

var ch = <? echo $i;  ?>;

var arr = new Array();
for (var i = 0; i<ch; i++)
{
arr[i] = i;
}

После этого хочу сделать так, что бы по клику вылазили разные файлы! И так как у них названия это цифры у меня, то есть 1.html 2.html и т.д.
То я делаю так:

$('#btn-rnd').click(function(){
			$($idtab).animate({'opacity':0}, 500, function(){
					$($idtab).load($url'.html');
					$($idtab).animate({'opacity':1}, 500);
			}) 
 setTimeout(2000); 
});

Где $url Я бы хотел задать как всегда разное и не повторяющееся число от 1 до кол-ва файлов в директории txt
Массив думаю мешать так:

function(){for (var j=0;j<arr.length;j++) arr.push(arr.splice((Math.random() * arr.length), 1));

Но сделать цикл для клика никак не получается, чтобы в нем $url брался из смешанного цикла((( Что только не пробовал!

[chelkaz]

chelkaz, что я не совсем понял Вас. Сначала кликаем по табу, но ничего не должно загружаться, потом кликаем по кнопке и загружается контент зависимо от выбранного таба, так?

Нет, загрузка идет только по клику по кнопке. Я вот более подробно написал выше...

[ruslan_mart]

Экпирементируйте

var ch = <?=$i?>,
	prev,
	rand = function() {
		var n = Math.floor(Math.random() * ch) + 1;
		return n == prev ? rand() : (prev = n);
	};

$('#btn-rnd').click(function() {
	var n = rand();
	$('#tab-' + n).fadeOut(500, function() {
		$(this).load('fun-' + n + '.php').fadeIn(500);
	});
});