Табы для комментариев
Данный пример взят для комментариев движка сайта DLE. 1. Html код данного скрипта будет выглядеть так: [HTML]<div> <div> <ul class="tabs"> <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">Локальные комментарии</a></li> <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">Комментарии Вконтакте</a></li> </ul> <div id="content_1" class="content"> {comments} {addcomments} <div style="clear: both;height: 10px;"></div> </div> <div id="content_2" class="content"> <div id="vk_comments"></div> <script type="text/javascript"> Скрипт ВК кода </script> <div style="clear: both;height: 10px;"></div> </div> </div> </div>[/HTML] 2. Стили CSS для табов, что-бы всё было красивенько. [CSS]ul.tabs { margin:0px; padding:0px; } ul.tabs li { list-style:none; display:inline; } ul.tabs li a { background-color:#FF4500; color:#fff; padding:8px 14px 6px 14px; text-decoration:none; font-size:12px; font-weight:bold; text-transform:uppercase; border: 1px solid #8E8E8E; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; } ul.tabs li a:hover { background-color:#cc3c00; border: 1px solid #8E8E8E; text-decoration:none; } ul.tabs li a.active { background-color:#ffffff; color:#282e32; } .content { background-color:#ffffff; padding:10px; -webkit-border-radius: 8px; -webkit-border-top-left-radius: 0; -moz-border-radius: 8px; -moz-border-radius-topleft: 0; border-radius: 8px; border-top-left-radius: 0; border: 1px solid #8E8E8E; } #content_2, #content_3 { display:none; } ul.tabs { margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; } .content ul { margin:0px; padding:0px 20px 0px 20px; } .content ul li { list-style:none; border-bottom:1px solid #d6dde0; padding-top:15px; padding-bottom:15px; font-size:13px; } .content ul li a { text-decoration:none; color:#3e4346; } .content ul li a small { color:#8b959c; font-size:9px; text-transform:uppercase; position:relative; left:4px; top:0px; } .content ul li:last-child { border-bottom:none; }[/CSS] 2. И ЯваСкрипт для переключения между табами. [JavaScript]function tabSwitch(new_tab, new_content) { document.getElementById('content_1').style.display = 'none'; document.getElementById('content_2').style.display = 'none'; document.getElementById(new_content).style.display = 'block'; document.getElementById('tab_1').className = ''; document.getElementById('tab_2').className = ''; document.getElementById(new_tab).className = 'active'; }[/JavaScript] 
|
Категория: 
Опубликовал: 
Используемый код:
Web-сайт автора: 
Автор: Комменты
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация ]
[ Регистрация ]
