Русский
Чтобы помочь другу, я написал несколько простых вкладок и посвятил их нуждающимся друзьям. 1) Вызов нескольких точек
<html> <head> <style> body { text-align: center } .tab { width: 432px; Margin: 0 auto; overflow: border: 1px Solid #cccccc; } .menu,.menu li {margin:0; height:24px; list-style:none; text-align:center; .menu { border-bottom:1px Solid #cccccc; .menu .default {ширина: 84 пикселей; размер шрифта: 10pt; высота строки: 1,5; курсор: указатель; URL ('') без повторения; активный {ширина: 84 пикселей; размер шрифта: 10pt; высота строки: 1 пиксель; курсор: вес шрифта: жирный; фон: URL ('') нет повторения; } #more {ширина: 76 пикселей; размер шрифта: 10pt; высота строки: 1 пиксель; цвет: # FF0000; -align:right } .con { width:422px; height:184px; Margin:0 auto } </style> <head> <body> <script> function init(ids,cons,dis){ document.getElementById(ids) .getElementsByTagName('li')[0].className='active'; document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML; // document.getElementById(ids).onmouseover= function(){onmousOver(ids,cons,dis);}//Указатель мыши запускает эффект document.getElementById(ids).onclick=function(){onmousOver(ids,cons,dis);}//Клик запускает эффект} function onmousOver(ids,cons,dis){ o = o || window.event; var obj=o.target || o.srcElement; if (obj.tagName=='LI'){ if (obj. className==' active'||obj.id=='more')return; var o=document.getElementById(ids).getElementsByTagName('li'); for (var i=0;i<=o.length- 1;i++) {o[i].className='default'} obj.className='active'; if (obj.className=='active'){document.getElementById(cons).innerHTML=document.getElementById(dis +obj.id ).innerHTML;} } } </script> <!--#1--> <div class='tab'> <ul id='nav1' class='menu'> <li id=" l1" class= 'default'>Первые новости</li> <li id="l2" class='default'>Вторые новости</li> <li id="l3" class='default'>Третьи новости</li> li > <li id="l4" class='default'>Четвертая новость</li> <li id="l5" class='default'>Пятая новость</li> </ul> <div class= ' con' id='con1'> </div> </div> <div style="display:none"> <div id="div1_l1"> <span>Я искал на форуме вкладку для долгое время идеального эффекта не существует</span> </div> <div id="div1_l2"> <span>Поэтому я здесь, чтобы спросить экспертов, пожалуйста, помогите! </span> </div> <div id="div1_l3"> <span>Я нашел кое-что, что нужно изменить, но меню в заголовке слишком сложно найти. </span> </div> <div id=. " div1_l4"> <span> Он изменится при наведении на него курсора мыши, щелкать не нужно! </span> </div> <div id="div1_l5"> <span>Добавлено! </span> </div> </div> <script> init('nav1','con1',"div1_"); </script> <!--#2--> <div class='tab'); > <ul id='nav2' class='menu'> <li id="l1" class='default'>Первые новости</li> <li id="l2" class='default'>Вторые новости </ li> <li id="l3" class='default'>Третья новость</li> <li id="l4" class='default'>Четвертая новость</li> <li id="more "> <a href="#" target=_blank>Дополнительно>></a></li> </ul> <div class='con' id='con2'> </div> </div> <div style ="display:none"> <div id="div2_l1"> <span>Хочу сделать вкладку, но долго ищу на форуме без идеального эффекта</span> </div > <div id="div2_l2"> <span>Итак, я здесь, чтобы обратиться к экспертам, помогите мне! </span> </div> <div id="div2_l3"> <span>Я нашел кое-что, что нужно изменить, но меню в заголовке слишком сложно найти. </span> </div> <div id=. " div2_l4"> <span> Он изменится, если на него навести указатель мыши, без щелчка! </span> </div> </div> <script> init('nav2','con2',"div2_"); </script> <!--#3--> <div class='tab'); > <ul id='nav3' class='menu'> <li id="l1" class='default'>Первые новости</li> <li id="l2" class='default'>Вторые новости </ li> <li id="l3" class='default'>Третья новость</li> <li id="more" style="width:160px"><a href="#" target=_blank> Подробнее>> </a></li> </ul> <div class='con' id='con3'> </div> </div> <div style="display:none"> <div id ="div3_l1" > <span>Хочу сделать вкладку, но долго искал в форуме без идеального эффекта</span> </div> <div id="div3_l2"> <span>Поэтому я Хочу задать вопрос знатокам, помогите пожалуйста! </span> </div> <div id="div3_l3"> <span>Я нашел кое-что, что нужно изменить, но меню в заголовке слишком сложно найти. </span> </div> </div> < script> init('nav3','con3',"div3_");
