Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   как сделать эффект вкладок (https://javascript.ru/forum/misc/34444-kak-sdelat-ehffekt-vkladok.html)

cOAPerator 05.01.2013 01:46
как сделать эффект вкладок
 
есть 3 кнопки и соответствуюшие им блоки:
кнопка - блок
кнопка - блок
кнопка - блок
как сделать чтобы при нажатии на первую кнопку открывался 1 блок, а при нажании на любую другую, предыдущий блок скрывался, а новый соответствующий ему открывался?

Deff 05.01.2013 02:13
На jQuery

<script src="http://code.jquery.com/jquery-latest.js"></script>

<style>	
#menu {
margin-top: -5px;
width: 180px;
height: 60px;
background-repeat : no-repeat;}

#menu span {
text-align:left;
display:block;
color:#000000;
margin: 7px 0;
padding: 11px;
}
#submenu, #menu span {
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
background:#efeff0;
}

#menu .tabactive {
color: #000000;
    background:#777777;
}

#submenu {
padding: 3px;
height: 180px;
text-align: center;
font-size: 12px;
width: 540px;
}

.submenutext {
display: none; 
height: 40px;
}
</style>

<center><table id="tbl" style="width: 800px">
 <tbody>
  <tr>
   <td valign=top>
    <div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;">Добро пожаловать</span>
<span alt="#sm2" style="cursor: pointer;">Новости форума</span>
<span alt="#sm3" style="cursor: pointer;">Администрация</span>
<span alt="#sm4" style="cursor: pointer;">Баннеры партнеров</span>
           </b>
    </div>
   </td>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display:block;">
<br/><br/>
текст добро пожаловать
</div>
     <div id="sm2" class="submenutext"><br /><br />
текст новости форума
</div>
     <div id="sm3" class="submenutext"><br /><br />
текст Администрация
</div>
     <div id="sm4" class="submenutext"><br /><br />
текст баннеры партнеров
</div>

</div>
   </td>
</tr>
 </tbody>
</table></center>





<script type="text/javascript">
$(document).ready(function() {
$("#MenuTxT div.submenutext").hide();

$("#MenuTxT div.submenutext:first").show();
$("#menu span").click(function() {
    $("#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $(activeDiv).fadeIn();
    return false; });
});
</script>
span alt=

cOAPerator 05.01.2013 02:18
Deff, спасибо! немного не то, но принцип понятен. у меня просто изначально все блоки скрыты.
они появляются при нажатии на кнопку. и исчезают через х-секунд если мышь не наведена на блок..
надо теперь как то совместить с этим кодом :)

Deff 05.01.2013 02:23
cOAPerator,
эээ Открыта первая вкладка
При клике кнопки у всех класс tabactive удаляется и они скрываются, класс tabactive дописывается к активной вкладке,
Ссылка на id открываемого блока в теге alt - данной кнопки

cOAPerator 05.01.2013 02:31
Deff, понял, ща буду пробовать.. спасибо!

cOAPerator 05.01.2013 06:11
Deff, такс, убрал кусочек кода, и теперь при первом появлении все вкладки скрыты.
добавил вот такой код, и условие если наводил на блок, но ниче не делал, и убрал мышь с блока, то он автоматом скрывается
function doid_1(){
	$(activeDiv).slideUp(1000);
}
$(activeDiv).mouseleave(function(){
	mytime1 = setTimeout(doid_1, 1000);
});
$(activeDiv).mouseenter(function(){
	clearTimeout(mytime1);
});

А вот если не наводил мышой на активный блок, то он тоже должен скрыться
как таке сюда внедрить, ума не приложу... (мозг кипит уже)

Deff 05.01.2013 11:06
Цитата:
Сообщение от cOAPerator
добавил вот такой код, и условие если наводил на блок, но ниче не делал, и убрал мышь с блока, то он автоматом скрывается
Странно - если блок скрыт - на что там навести можно ?,
Можно пробовать наводить на кнопки

cOAPerator 05.01.2013 11:20
Цитата:
Сообщение от Deff (Сообщение 225362)
Странно - если блок скрыт - на что там навести можно ?,
Можно пробовать наводить на кнопки
не, вы не поняли.. блок же рядом с кнопкой, поэтому он не скрывается если над ним не провести мышкой, а если провести то скрывается..
попробую объяснить алгоритм действий:
у нас кнопки слева, блоки справа. загрузили страницу 1 раз - блоки скрыты, далее
нажимаем на первую кнопку, появляется соответствующий ей блок,
при этом мышь у нас пока еще находится над кнопкой..
так вот теперь:
если навели мышой на открытый блок, но ниче не делали, и потом убрали мышь с блока, то он скрывается так-же через X секунд.(этот кусок кода я дописал сам, он выше в моем посте.)
но если не наводить на блок открытый, он также должен скрыться сам через X секунд. (этого куска кода как раз и нету сейчас, и что дописывать не могу допереть)

полный код сейчас такой
<script type="text/javascript">
$(document).ready(function() {
$("#MenuTxT div.submenutext").hide();

//$("#MenuTxT div.submenutext:first").show();
$("#menu span").click(function() {
    $("#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $(activeDiv).fadeIn();
function doid_1(){
	$(activeDiv).slideUp(1000);
}
$(activeDiv).mouseleave(function(){
	mytime1 = setTimeout(doid_1, 1000);
});
$(activeDiv).mouseenter(function(){
	clearTimeout(mytime1);
});
    return false; });
});
</script>

Deff 05.01.2013 11:33
Цитата:
Сообщение от cOAPerator
(этого куска кода как раз и нету сейчас, и что дописывать не могу допереть)
Не наю - может позже к вечеру....Тут идеалогию другую нун придумывать - на скрытый блок нельзя навести мышью, после того как он скрылся - занчит тут другой эффект нужно применять для открытых блоков, типо анимации прозрачности - если нет курсора

cOAPerator 05.01.2013 11:38
Цитата:
Сообщение от Deff (Сообщение 225365)
на скрытый блок нельзя навести мышью, после того как он скрылся
он НЕ скрытый! он показан в данный момент.
этот кусок кода
function doid_1(){
	$(activeDiv).slideUp(1000);
}
$(activeDiv).mouseleave(function(){
	mytime1 = setTimeout(doid_1, 1000);
});
$(activeDiv).mouseenter(function(){
	clearTimeout(mytime1);
});
    return false; });
});

скрывает блок активный только в том случае, если на него навести мышой а потом убрать, и никак больше. mouseleave насколько я понимаю срабатывает "при убирании" мыши с блока открытого..

а как я написал выше, если не наводить на блок открытый, он не скрывается... на месте висит открытым.

попробуйте пошагово сделать как я выше написал, сами увидите)

cOAPerator 05.01.2013 12:36
Вот, попробую в коментариях написать:
<script type="text/javascript">
$(document).ready(function() {
$("#MenuTxT div.submenutext").hide();
$("#menu span").click(function() {
    $("#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $(activeDiv).fadeIn(); // открывает выбранный блок

// эта часть (1) кода, должна скрывать текущий открытый блок, даже если мы не наводили мышь на него
тут должен быть код...
//конец части (1)

// эта часть (2) кода, скрывает открытый выше блок, только после того как на него была наведена мышь и убрана
function doid_1(){
	$(activeDiv).slideUp(1000);
}
$(activeDiv).mouseleave(function(){
	mytime1 = setTimeout(doid_1, 1000);
});
$(activeDiv).mouseenter(function(){
	clearTimeout(mytime1);
});
// конец части (2)
    return false; });
});
</script>

Deff 05.01.2013 12:38 
<script src="http://code.jquery.com/jquery-latest.js"></script>

<style>	
#menu {
margin-top: -5px;
width: 180px;
height: 60px;
background-repeat : no-repeat;}

#menu span {
text-align:left;
display:block;
color:#000000;
margin: 7px 0;
padding: 11px;
}
#submenu, #menu span {
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
background:#efeff0;
}

#menu .tabactive {
color: #000000;
    background:#777777;
}

#submenu {
padding: 3px;
height: 180px;
text-align: center;
font-size: 12px;
width: 540px;
}

.submenutext {
display: none; 
height: 40px;
}
</style>

<center><table id="tbl" style="width: 800px">
 <tbody>
  <tr>
   <td valign=top>
    <div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;">Добро пожаловать</span>
<span alt="#sm2" style="cursor: pointer;">Новости форума</span>
<span alt="#sm3" style="cursor: pointer;">Администрация</span>
<span alt="#sm4" style="cursor: pointer;">Баннеры партнеров</span>
           </b>
    </div>
   </td>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display:block;">
<br/><br/>
текст добро пожаловать
</div>
     <div id="sm2" class="submenutext"><br /><br />
текст новости форума
</div>
     <div id="sm3" class="submenutext"><br /><br />
текст Администрация
</div>
     <div id="sm4" class="submenutext"><br /><br />
текст баннеры партнеров
</div>

</div>
   </td>
</tr>
 </tbody>
</table></center>





<script type="text/javascript">
$(document).ready(function() {
$("#MenuTxT div.submenutext").hide();


$("#menu span").click(function() {
    $("#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $(activeDiv).fadeIn();
    StTimer = setTimeout(function() {doid_1_HIDE()}, 2000)
    return false; });
});
setTimeout(function() {$("#menu span:first").click();}, 300); //Это автозапуск первого блока

function doid_1_SHOW(){
          activeDiv=$($("#menu span.tabactive").attr("alt"));
          activeDiv.stop().fadeIn(1000);
}
function doid_1_HIDE(){
          activeDiv=$($("#menu span.tabactive").attr("alt"));
          activeDiv.stop().fadeOut(1000);

}

$("#submenu").mouseenter(function(){
              if ($($("#menu span.tabactive").attr("alt")).css('display')=='block') {
              clearTimeout(StTimer);
              $(this).stop(true,true);
              doid_1_SHOW();
              }
}).mouseleave(function(){
           doid_1_HIDE();
});

</script>

cOAPerator 05.01.2013 12:43
Deff, вот я поражаюсь, как у Вас на меня терпения хватает)))
ваш вариант выше классный, но он при наведении срабатывает и на кнопки, ето немножко не то.
я вон в посте выше в коде коментарии проставил, может так понятнее будет...

пс: я вам всю карму истыкаю плюсиками)))

Deff 05.01.2013 12:48
Цитата:
Сообщение от cOAPerator
но он при наведении срабатывает и на кнопки,
Поправил

cOAPerator 05.01.2013 12:57
блин, опять не то( ну как объяснить то(((
как сделать чтобы вы тоже мою демонстрацию кода видели? ну вот как вы мне показываете...

Deff 05.01.2013 12:59
cOAPerator,
Объяснить все нюансы
к примеру - ушли с поля с текстом - текст скрылся - нажали на новую кнопку - текст все так же скрыт ?
Карочь описать все варианты событий

cOAPerator 05.01.2013 13:02
Цитата:
Сообщение от Deff (Сообщение 225379)
Карочь описать все варианты событий
ща попытаюсь еще раз.. как сделать демонстрацию кода?

Deff 05.01.2013 13:05
Так:
[HTML run][/HTML]

cOAPerator 05.01.2013 13:14
Для исключения непоняток определим: есть кнопка "добро пожаловать" и блок "добро пожаловать"

нажимаем на кнопку "добро пожаловать", появляется соответствующий ей блок "добро пожаловать", при этом мышь у нас пока еще находится над кнопкой.. если ниче не делаем, блок "добро пожаловать" скрывается через 2 секунды.

теперь если не наводить на открытый блок "добро пожаловать", он должен скрыться сам через 2 секунды.

если навели мышой на открытый блок "добро пожаловать", но ниче не делали, и потом убрали мышь с блока, то он скрывается так-же через 2 секунды.

Deff 05.01.2013 13:18
cOAPerator,
Поправил пост #12

cOAPerator 05.01.2013 13:22
Цитата:
Сообщение от Deff (Сообщение 225389)
Поправил пост №12
теперь появился новый косячек:
нажали на кнопку добро пожаловать - появился блок добро пожаловать
если на блок добро пожаловать навести мышь, он все равно пропадает... а не должен.
остальное работает как надо

и еще маленький вопрос, ща вот заметил, что при первой загрузке блок добро пожаловать вначале появляется и исчерает 1 раз без кликов вообще.. глюк?

Deff 05.01.2013 13:59
Цитата:
Сообщение от cOAPerator
при первой загрузке блок добро пожаловать вначале появляется и исчерает 1 раз без кликов вообще.. глюк?
Приписал коммент

Цитата:
Сообщение от cOAPerator
нажали на кнопку добро пожаловать - появился блок добро пожаловать
если на блок добро пожаловать навести мышь, он все равно пропадает... а не должен.
Поправил пост №12

cOAPerator 05.01.2013 14:03
Цитата:
Приписал коммент
на счет этого понял.

тока теперь снова при повторном наведении на блок добро пожаловать он сам появляется без клика на кнопку.
ни один блок не должен появляться без клика.

остальное как надо

ВО!!!!! я у вас в коде
$("#submenu").mouseenter(function(){
              clearTimeout(StTimer);
              $(this).stop(true,true);
              doid_1_SHOW();
 
}).mouseleave(function(){
           doid_1_HIDE();
});

стер doid_1_SHOW(); и получилось как надо!
$("#submenu").mouseenter(function(){
              clearTimeout(StTimer);
              $(this).stop(true,true);
}).mouseleave(function(){
           doid_1_HIDE();
});

теперь вроде работает все, вот посмотрите.., только не знаю как пошире окно предпросмотра сделать
<script src="http://code.jquery.com/jquery-latest.js"></script>

<style>	
#menu {
margin-top: -5px;
width: 180px;
height: 60px;
background-repeat : no-repeat;}

#menu span {
text-align:left;
display:block;
color:#000000;
margin: 7px 0;
padding: 11px;
}
#submenu, #menu span {
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
background:#efeff0;
}

#menu .tabactive {
color: #000000;
    background:#777777;
}

#submenu {
padding: 3px;
height: 180px;
text-align: center;
font-size: 12px;
width: 540px;
}

.submenutext {
display: none; 
height: 40px;
}
</style>

<center><table style="width: 800px">
 <tbody>
  <tr>
   <td valign=top>
    <div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;">Добро пожаловать</span>
<span alt="#sm2" style="cursor: pointer;">Новости форума</span>
<span alt="#sm3" style="cursor: pointer;">Администрация</span>
<span alt="#sm4" style="cursor: pointer;">Баннеры партнеров</span>
           </b>
    </div>
   </td>
   <td id="MenuTxT"  align="center" valign="top">
<div id="submenu" align="center"> 
     <div id="sm1" class="submenutext"><br/><br/>текст добро пожаловать</div>
     <div id="sm2" class="submenutext"><br /><br />текст новости форума</div>
     <div id="sm3" class="submenutext"><br /><br />текст Администрация</div>
     <div id="sm4" class="submenutext"><br /><br />текст баннеры партнеров</div>
</div>
   </td>
</tr>
 </tbody>
</table></center>
<script type="text/javascript">
$(document).ready(function() {
$("#MenuTxT div.submenutext").hide();
 
 
$("#menu span").click(function() {
    $("#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $(activeDiv).fadeIn();
    StTimer = setTimeout(function() {doid_1_HIDE()}, 2000)
    return false; });
});
//setTimeout(function() {$("#menu span:first").click();}, 300); //Это автозапуск первого блока
 
function doid_1_SHOW(){
          activeDiv=$($("#menu span.tabactive").attr("alt"));
          activeDiv.stop().fadeIn(1000);
}
function doid_1_HIDE(){
          activeDiv=$($("#menu span.tabactive").attr("alt"));
          activeDiv.stop().fadeOut(1000);
}
$("#submenu").mouseenter(function(){
              clearTimeout(StTimer);
              $(this).stop(true,true);
}).mouseleave(function(){
           doid_1_HIDE();
});
</script>

cOAPerator 05.01.2013 14:29
Deff, спасибо Вам наиогромнейшее!!!!!!!!!! Цены Вам нет!!!

Deff 05.01.2013 15:01
Поправил

cOAPerator 05.01.2013 15:10
Цитата:
Сообщение от Deff (Сообщение 225409)
Поправил
ага, вижу, тока не пойму в чем разница в работе.. и так и так работает..

ладно, спасибо еще раз огромное, не буду Вас мучать больше)

ПС: карму плюсанул)


Часовой пояс GMT +3, время: 10:06.