VPF::TabControl - Форум программистов

Tony

Дата 6.9.2006, 09:14 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12

Код


<html>
    <head>
        <script type="text/javascript">
        
            function changeTab(sel){
                //header
                /*
                * created by Tjomi4 05.09.2006
                */
            
                i=sel.cellIndex;
                num=sel.id.indexOf('_');
                ID=sel.id.substring(0,num);
                
                sel.className="tabPageSelected"
                tabbs=sel.parentNode;
                for (j=0;j<tabbs.cells.length;j++){
                    if(i!=j && j!=tabbs.cells.length-1)
                        tabbs.cells[j].className="tabPage";
                }
                //body
                tab_body=document.getElementById(ID);
                tab_body.cells[i].style.display="block";
                
                for(j=0;j<tab_body.cells.length;j++){
                    if(i!=j)
                        tab_body.cells[j].style.display="none";
                }
            }
            function selectDefaultTab(ID){
                obj=document.getElementById(ID);
                changeTab(obj);
            }
    
        </script>
        <style>    
          .tabControl{
            
          }      
          .tabHeader{
                
            }            
            .tabPage{
                border-right:1px solid #B0BEC7;
            border-left:1px solid #B0BEC7;
            border-top:1px solid #B0BEC7;
            border-bottom:1px solid #B0BEC7;
            font: normal 12px arial;
            cursor:pointer;
            padding-left:10px;
            
            background-color:#D8E3EA;
                padding-right:10px;
                border-collapse:collapse;
            }
                
            .tabPageSelected{
                background-color: #F2F5F8;
                cursor:pointer;
                font: normal 12px arial;
                border-right:1px solid #B0BEC7;
            border-left:1px solid #B0BEC7;
            border-top:1px solid #B0BEC7;
            border-bottom:0px solid #B0BEC7;
                padding-left:10px;
                padding-right:10px;
                border-collapse:collapse;
            }
          .tabHeaderLine{
            border-bottom:1px solid #B0BEC7;
          }
            .tabControlBody tbody tr td{
                display:none;
                border-collapse:collapse;
                font: normal 12px arial;
                vertical-align: top;
            }
            
            .tabControlBody{
                background-color: #FBFCFD;
                border-right:1px solid #B0BEC7;
            border-left:1px solid #B0BEC7;
            border-bottom:1px solid #B0BEC7;
            }
        </style>
    </head>
    <body>

        <table border="0" class="tabControl" cellspacing="0" cellpadding="0" width="100%">
            <tbody>
                <tr>
                    <td>
                        <table border="0" cellspacing="0" cellpadding="0" class="tabHeader">
                            <tbody>
                                <tr>
                                    <td onclick="changeTab(this);" id="s3475394dfbgf_1" class="tabPage">
                                        qwerty
                                    </td>
                                    <td onclick="changeTab(this);" id="s3475394dfbgf_2" class="tabPage">
                                        zxcvb
                                    </td>
                                    <td onclick="changeTab(this);" id="s3475394dfbgf_3" class="tabPage">
                                        zxcvb
                                    </td>
                                    <td width="100%" class="tabHeaderLine"><img src="spacer" width="1" height="1"/></td>
                                </tr>
                            <tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td height="400px" valign="top">
                        <table  width="100%" class="tabControlBody" cellpadding="0" cellspacing="0" style="height:100%" border="0">
                            <tbody>
                                <tr id="s3475394dfbgf">
                                    <td>
                                        1 asdfasd ;fdng;fdng;dfg fgdfgfd gkfg fdg dfgd gdfgfg df gfgfdgdf g fdg</br>
                                        dsfdfsdf
                                    </td>
                                    <td>
                                        2 dsfsdfd
                                    </td>
                                    <td>
                                        3 xzcxcxcxzcxzcxc xzczxc
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
        
        <script type="text/javascript">document.onload=selectDefaultTab('s3475394dfbgf_1');</script>
    
    </body>
</html>

--------------------

pythonwin

Дата 7.9.2006, 16:24 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: нет
Всего: 36

Tony, класс!

я использую http://www.barelyfitz.com/projects/tabber/
А также есть код

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Tabs</title>
<meta http-equiv="Content-Type" content='text/html; charset=utf-8'>

<style>
.tabv {z-index:5; border-top: 1px solid #778; border-right: 1px solid #778; border-bottom: 1px solid white; border-left: 1px solid #778; position:absolute; top: 0px; width:70px; height:25px }
.tabh {z-index:3; border-top: 1px solid #448;border-right: 1px solid #448;border-bottom: 1px solid white; border-left: 1px solid #448; position:absolute;top: 0px; width:70px; height:25px }
.telo {z-index:4; border: #778 solid 1px; position:absolute; left:0px; top: 26px; width:600px; height:200px }
</style>

<script>
var objtab;
var objbd;

function Change(id) {
for (var i=1;i<=3;i++) {
objtab=document.getElementById("tab"+i);
objbd=document.getElementById("bd"+i);
if(id=="tab"+i) {
objtab.style.zIndex=5;
objtab.style.borderLeftColor="#778";
objtab.style.borderTopColor="#778";
objtab.style.borderRightColor="#778";
objbd.style.visibility="visible";
} else {
objtab.style.zIndex=3;
objtab.style.borderLeftColor="#448";
objtab.style.borderTopColor="#448";
objtab.style.borderRightColor="#448";
objbd.style.visibility="hidden";
}
}
}
</script>

</head>

<body bgcolor="#FFFFFF">
<div style="position:relative; top:0px;left:0px">
<!--
Этот <div> суёшь в то место куда нужно, а внутри него
всё будет работать как и раньше
-->
<div id="tab1" class="tabv" style="left:3px; cursor:pointer" onClick="Change('tab1')" >
&nbsp;Tab #1
</div>
<div id="tab2" class="tabh" style="left:78px; cursor:pointer" onClick="Change('tab2')">
&nbsp;Tab #2
</div>
<div id="tab3" class="tabh" style="left:153px; cursor:pointer" onClick="Change('tab3')">
&nbsp;Tab #3
</div>

<div id="bd1" class="telo" style="visibility:visible">
<br><br>Тело таба №1
</div>
<div id="bd2" class="telo" style="visibility:hidden">
<br><br>Тело таба №2
</div>
<div id="bd3" class="telo" style="visibility:hidden">
<br><br>Тело таба №3
</div>
</div>
</body>
</html>

Но твой тоже интересен - что мне больше всего понравилось - у тебя нет привязки к пикселям + размер заголовка вкладки зависит не от какой-то переменной или стиля, а от длины текста или размера рисунка + можно легко вставлять рисунок или любой другой объект.

Добавлено @ 16:25
Tony, это окончательный вариант?

Добавлено @ 16:26
+1

--------------------

портал по Python
раздел на винграде по Python
язык Python

Tony

Дата 8.9.2006, 00:48 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12

Tony, это окончательный вариант? да вроде да. А чего не хватает?

--------------------

pythonwin

Дата 8.9.2006, 07:12 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: нет
Всего: 36

вот этот проект посмотри http://www.barelyfitz.com/projects/tabber/

может что-нибудь и можно будет добавить.

--------------------

портал по Python
раздел на винграде по Python
язык Python

Tony

Дата 8.9.2006, 09:25 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12

Как я понимаю тебэ не хватает ,4то на смену закладки не визивается другая ункция.Например AJAX.Toest' sholknuл po koreшку таба он вклю4ился + например виозвалась 2 функция.Такето можно сдеалть так:
<td onclick="changeTab(this);invokeAjax('mouj_url')" id="s3475394dfbgf_1" class="tabPage">

--------------------

pythonwin

Дата 8.9.2006, 11:12 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: нет
Всего: 36

Цитата(Tony @ 8.9.2006, 16:25

)

invokeAjax

Это что такое?

--------------------

портал по Python
раздел на винграде по Python
язык Python

Tony

Дата 8.9.2006, 11:19 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12

Ты можешь сам любую функцию прописать.Я просто привёл, как будто при переклу4ении закладки(1) сраватывает вызов Ajax'a.

--------------------

pythonwin

Дата 8.9.2006, 13:12 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: нет
Всего: 36

Цитата(Tony @ 8.9.2006, 18:19

)

спасибо!

--------------------

портал по Python
раздел на винграде по Python
язык Python

SelenIT

Дата 10.11.2006, 04:19 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 1
Всего: 401

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

Постановка задачи: пусть есть несколько блоков с заданными id-ами, есть менюшка со ссылками на них как на якоря (<a href="#id">), в виде списка. Хочется, чтобы при отсутствии JS оно так и работало (это максимум возможного в такой ситуации), а при его наличии превращалось в красивый TabControl. Должна быть возможность (опциональная) заранее спрятать все блоки, кроме одного, с помощью специального CSS-класса, чтобы это все не дергалось в момент превращения (без JS этот класс не должен влиять ни на что). На странице может быть неограниченное число таких систем блоков с разными стилями.

Мой вариант решения:

Код


function tabControl(tabsContainerId, actualTabClass, hiddenTabClass) {
   this.tabsId = tabsContainerId; // id списка табов
   this.aCSS = actualTabClass; // CSS-класс активного заголовка таба
   this.hCSS = hiddenTabClass; // CSS-класс скрытого тела таба
   // добавление стилей, скрывающих тела табов, кроме нужного
   // если JS отключен, все тексты будут просто выведены друг за другом
   document.write('<style type="text/css">\n'+
                  'div.'+this.hCSS+' { display: none; }\n'+
                  '#'+this.tabsId+' a { cursor:default; }\n'+
                  '<\/style>\n');
   // постановка в очередь на инициализацию объекта при загрузке страницы
   // (спасибо AKS за помощь в технологии добавления обработчиков)
   (function ah(o, e, f) {
      o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent ? o.attachEvent('on'+e, f) : '';
   }) (window, 'load', (function ii(x) { return function() {x.init() }}) (this));
}

tabControl.prototype.init = function() {
   this.tabs = document.getElementById(this.tabsId).getElementsByTagName('li'); // заголовки табов
   this.divs = []; // тела табов
   this.actIndex = 0; // индекс активного таба
   for (var i=0, hideCnt = 0, t, a; t=this.tabs[i]; i++) {
      // находим соответствующий заголовку блок и убираем более ненужную ссылку
      a = t.getElementsByTagName("a")[0];
      this.divs[i] = document.getElementById(a.href.split('#')[1]);
      a.removeAttribute("href");
      // добавляем реакцию на клик
      t.onclick = (function(ob,num) { return function() { ob.activate(num); return false; } })(this,i);
      // считаем не скрытые по умолчанию дивы
      if (this.divs[i].className.indexOf(this.hCSS)!=-1) hideCnt++;
      // активным табом станет первый из не скрытых по умолчанию
      if (hideCnt && !this.actIndex) this.actIndex = i;
   }
   // скрываем все табы, кроме активного (если не все они еще скрыты)
   if (hideCnt < this.divs.length-1) for(var i=0, d; d=this.divs[i]; i++) {
      if (i!=this.actIndex && d.className.indexOf(this.hCSS)==-1) d.className += ' '+this.hCSS;
   }
   // выделяем визуально заголовок активного таба
   this.activate(this.actIndex);
}

tabControl.prototype.activate = function(i) {
   // Визуальная смена активного таба. По идее, тут все очевидно ;)
   this.tabs[this.actIndex].className = this.tabs[this.actIndex].className.replace(this.aCSS, '');
   this.divs[this.actIndex].className += ' '+this.hCSS;
   this.tabs[i].className += ' '+this.aCSS;
   this.divs[i].className = this.divs[i].className.replace(this.hCSS, '');
   this.actIndex = i;
}

и пример использования (оформление табов, как и идея скрипта, пришли из этой темы):

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Еще один TabControl)</title>
    <style type="text/css">
#cont * { margin: 0; padding: 0; }
#tabs { margin: 0 auto; list-style-type: none; display: table; border-spacing: 3px 0; }
#tabs li { display: table-cell; font: normal 1em/1em courier new, monospace; background: #1A7515 url(bg0.gif) 0 -50px no-repeat; color: #A4D9A1; }
#tabs li a { display: block; padding: 0.2em 1.5em; background: url(bg1.gif) 100% -50px no-repeat; }
#tabs li.actual { background: #A4D9A1 url(bg0.gif) 0 0 no-repeat; color: #1A7515; }
#tabs li.actual a { background: url(bg1.gif) 100% 0 no-repeat; }
#main { background: #A4D9A1; margin: 0; padding: 2em 0; font: normal 0.76em/1em verdana, sans-serif; color: #1A3515; }
#main div { margin: 0 2em; padding: 0.5em 0; height: 10em; }
     </style>
     <!--[if lte IE 6]>
     <style>
#cont { position: relative; width: 100%; }
#tabs, #tabs li, #tabs li span { margin: 0; float: left; display: inline; }
#tabs { position: relative; left: expression((this.offsetParent.clientWidth - this.offsetWidth - 3)/2+'px'); }
#tabs li { margin-left: 3px; }
#main { clear: left; width: 100%; }
     </style>
     <![endif]-->
     <script type="text/javascript" src="tabcontrol.js"></script>
     <script type="text/javascript">
new tabControl('tabs', 'actual', 'hidden');
     </script>
</head>
<body>
    <div id="cont">
        <ul id="tabs">
            <li><a href="#t1">Первая</a></li>
            <li><a href="#t2">Вторая</a></li>
            <li><a href="#t3">Последняя</a></li>
        </ul>
    </div>
    <div id="main">
        <div id="t1" class="hidden">Текст первой вкладки.</div>
        <div id="t2">Текст второй вкладки. Она открывается по умолчанию, т.к. ей единственной не назначен CSS-класс <i>hidden</i>.</div>
        <div id="t3" class="hidden">А тут текст последней вкладки.</div>
    </div>
</body>
</html>

А вот так это безобразие работает (проверено в FF2, Opera 8-8.5-9, IE6).

Известные баги тестовой версии: пока это нельзя использовать в XHTML, отдаваемом с честным Content-type (из-за использования document.write, в принципе знаю как обойти, но цена - усложнение и ухудшение совместимости).

Это сообщение отредактировал(а) SelenIT - 10.11.2006, 04:21

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

pythonwin

Дата 10.11.2006, 06:46 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: нет
Всего: 36

SelenIT, спасибо, за пример! smile

а твой tabcontrol может содержать рисунки в заголовках?

--------------------

портал по Python
раздел на винграде по Python
язык Python

SelenIT

Дата 10.11.2006, 12:56 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 1
Всего: 401

pythonwin, может, в какой-то мере пример их уже содержит smile

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

Это сообщение отредактировал(а) SelenIT - 13.11.2006, 03:49

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

SelenIT

Дата 13.11.2006, 03:53 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 1
Всего: 401

Сделал новую версию "безобразия":

теперь работает и в XHTML;
заголовки табов теперь можно делать не только списком, но и таблицей, и не только (единственное требование - ссылки должны быть напрямую вложены в <li>, <td> и т.д., но и в противном случае нужно лишь изменить код ф-ции activate - добавить нужное кол-во раз .parentNode);
исправлен баг с первоначальной "активацией" заголовка, если по умолчанию тела нескольких вкладок не были спрятаны соотв. CSS-классом.

Пример также обновлен, добавлена демонстрация вложенного TabControl-а с заголовками в таблице.

Код


// конструктор: передаем ему ID общего контейнера табов, класс выделенного заголовка, класс скрытого тела таба
function tabControl(tabsContainerId, actualTabClass, hiddenTabClass) {
   this.tabsId = tabsContainerId;
   this.aCSS = actualTabClass;
   this.hCSS = hiddenTabClass;
   // динамически добавляем стили, нужные только при наличии JS
   this.addStyle('div.'+this.hCSS, 'display: none;');
   this.addStyle('#'+this.tabsId, 'cursor:default;');
   // ставим в очередь на инициализацию при загрузке
   (function ah(o, e, f) {
      o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent ? o.attachEvent('on'+e, f) : '';
   }) (window, 'load', (function ii(x) { return function() {x.init() }}) (this));
}

// вспомогательная ф-ция динамического добавления стилей, браузероспецифичная
// ей передаем селектор и соответствующий ему стиль (в виде строк)
tabControl.prototype.addStyle = 
   document.styleSheets && (tabControl.s = document.styleSheets[document.styleSheets.length - 1]) // есть ли встроенный метод для работы с CSS?
   ? tabControl.s.addRule // есть метод IE ?
      ? function(sel, styl) { tabControl.s.addRule(sel, styl) } // IE
      : function(sel, styl) { tabControl.s.insertRule (sel + ' {' + styl + '}', tabControl.s.cssRules.length) } // Gecko, Safari, Opera 9+
   : function(sel, styl) { // Opera 8
       var s = document.createElement('style');
       s.innerHTML = sel + ' {' + styl + '}';
       (document.documentElement||document.body).appendChild(s);
     }

// инициализация
tabControl.prototype.init = function() {
   // находим ссылки внутри контейнера
   this.tabs = document.getElementById(this.tabsId).getElementsByTagName('a');
   this.divs = [];
   this.actIndex = null;
   this.unhidden = [];
   for (var i=0, t; t=this.tabs[i]; i++) {
      // находим блок, на кото. ведет текущая ссылка
      this.divs[i] = document.getElementById(t.href.split('#')[1]);
      // убираем саму ссылку
      t.removeAttribute("href");
      // добавляем реакцию на клик
      t.parentNode.onclick = (function(ob,num) { return function() { ob.activate(num); return false; } })(this,i);
      // если блок не спрятан по умолчанию - запомним его, первый из таких блоков будет активным табом
      if (this.divs[i].className.indexOf(this.hCSS)==-1) this.unhidden[this.unhidden.length] = this.divs[i];
      if (this.unhidden.length && this.actIndex==null) this.actIndex = i;
   }
   // если все блоки были спрятаны - открываем и затем активируем первый
   if (this.unhidden.length<1) {
      this.divs[0].className = this.divs[0].className.replace(this.hCSS,'');
      this.actIndex = 0;
   }
   // прячем все неспрятанные блоки, кроме первого (активного)
   else 
   for(var i=1, d; d=this.unhidden[i]; i++) {
      d.className += ' '+this.hCSS;
   }
   this.activate(this.actIndex);
}

// визуальная смена активного таба
tabControl.prototype.activate = function(i) {
   this.tabs[this.actIndex].parentNode.className = this.tabs[this.actIndex].className.replace(this.aCSS, '');
   this.divs[this.actIndex].className += ' '+this.hCSS;
   this.tabs[i].parentNode.className += ' '+this.aCSS;
   this.divs[i].className = this.divs[i].className.replace(this.hCSS, '');
   this.actIndex = i;
}

P.S. Обнаружил и исправил еще один баг начальной загрузки - вариант, когда по умолчанию ни один див не спрятан, я предусмотрел, а вот если все спрятаны... теперь тоже предусмотрел smile

Это сообщение отредактировал(а) SelenIT - 14.11.2006, 01:51

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

pythonwin

Дата 13.11.2006, 06:55 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: нет
Всего: 36

SelenIT, ++1 smile

Добавлено @ 07:05
SelenIT, а рисунки в заговках и AJAX сможешь доделать?

--------------------

портал по Python
раздел на винграде по Python
язык Python

Izabela

Дата 28.5.2007, 11:51 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 121
Регистрация: 13.2.2007
Где: Lviv

Репутация: нет
Всего: 3

Tony, а где у тебя AJAX используетса?

--------------------

Izabela

Дата 29.5.2007, 19:29 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 121
Регистрация: 13.2.2007
Где: Lviv

Репутация: нет
Всего: 3

Tony, попробовала дивами вместо таблицы

Код



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <script type="text/javascript">
        var  itab_body = new Array();  
            function changeTab(sel){
                //header
          
                sel.className="tabPageSelected"
                var tab_head=sel.parentNode;
                var i;
                 if(sel == document.getElementById('first')){i=0}
                 if(sel == document.getElementById('second')){i=1}
                 if(sel == document.getElementById('third')){i=2}
                 var len = tab_head.getElementsByTagName('div').length;
                 for (j=0;j < len;j++){
                    if(i!=j && j!=len-1)
                       tab_head.getElementsByTagName('div')[j].className="tabPage";
                }
                //body
             //var tab_body=tab_head.parentNode.childNodes[3];//ето в ИЕ не хочет идти
              var tab_body=document.getElementById("tab_body");
               var itab_body = tab_body.getElementsByTagName("div");
               itab_body[i].style.display="block";
                var m_blen =itab_body.length;
                for(j=0;j < m_blen;j++){
                    if(i!=j)
                        itab_body[j].style.display="none";
                }
                           

            }
            function selectDefaultTab(ID){
                obj=document.getElementById(ID);
                changeTab(obj);
            }
    
        </script>
        <style>    
          .tabControl{
            border: 0px solid red;
            
          }      
          .tabHeader{
                border: 0px solid black
            }            
            .tabPage{
                border-right:1px solid #B0BEC7;
            border-left:1px solid #B0BEC7;
            border-top:1px solid #B0BEC7;
            border-bottom:1px solid #B0BEC7;
            font: normal 12px arial;
            cursor:pointer;
            padding-left:10px;
            
            background-color:#D8E3EA;
                padding-right:10px;
                border-collapse:collapse;
                float:left;
            }
                
            .tabPageSelected{
                background-color: #F2F5F8;
                cursor:pointer;
                font: normal 12px arial;
                border-right:1px solid #B0BEC7;
            border-left:1px solid #B0BEC7;
            border-top:1px solid #B0BEC7;
            border-bottom:0px solid #B0BEC7;
                padding-left:10px;
                padding-right:10px;
                border-collapse:collapse;
            }
          .tabHeaderLine{
            border-bottom:1px solid #B0BEC7;
          }
            
            .tabControlBody{
                background-color: #FBFCFD;
                border-right:1px solid #B0BEC7;
            border-left:1px solid #B0BEC7;
            border-bottom:1px solid #B0BEC7;
            width: 400px;
            height: 500px;
            }
        </style>
    </head>
    <body>

        <div class="tabControl">
            
                        <div class="tabHeader">
                            
                                    <div  onclick="changeTab(this);" id="first" class="tabPage" style="float:left;">
                                       First_tab
                                    </div>
                                    <div onclick="changeTab(this);" id="second" class="tabPage" style="float:left;">
                                       Second_tab
                                    </div>
                                    <div onclick="changeTab(this);" id="third" class="tabPage" style="float:left;">
                                       and last tab
                                    </div>
                                 <div  class="tabHeaderLine" style="float:left; width:1px; height:1px;"> </div>
                        </div>
                        
                      
                  
             
                        <div id="tab_body"  class="tabControlBody" style="clear:left;" >
                        
                                <div>
                                   
                                       I have done so much with so little for so long that I am now qualified to do anithing with nothing
                                </div>        
                                <div >
                                     Nadiaaaaaa
                                </div>
                                
                                <div >
                                       Υ 㨫泠顢첮뮠- 䰠乸쬠ⳮ顭ࡧ歫堭 ౮㡫鹼⿮

                                </div>
                        </div>
                  
            
           
    </div>
        
        <script type="text/javascript">document.onload=selectDefaultTab("first");</script>
    
    </body>
</html>

только во

Добавлено через 46 секунд
хочу переделать класом

--------------------

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Наши скрипты \| Следующая тема »