табы на css

Тема в разделе "Веб-дизайн", создана пользователем Dark Angell, 31 июл 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Dark Angell

    Dark Angell Читатель

    Заблокирован
    Регистр.:
    29 фев 2008
    Сообщения:
    1.035
    Симпатии:
    690
    собственно интересуют вкладки переключения на css,для сокращения места на сайте,у меня есть скрипт который делит на 3-и вкладки,но при добавлении ещё одного такого же он отказываеться работать,так как первый скрипт не даёт ему исполняться и берёт функции переключения на себя,переменные менял полностью для вствки,но не помогло,вот скрин того что мне нужно:
    image001.png
    главное чтобы можно было использовать до 10 таких табов,и желательно под двиг dle :)
     
  2. allximik

    allximik Постоялец

    Регистр.:
    6 сен 2008
    Сообщения:
    114
    Симпатии:
    75
    Может лучше использовать для этих целей ajax?
    Например
    http://coderx.in/2009/07/30/10-javascript-ajax-menyu-tabov-dlya-vas/
    Перейти по ссылке

    и тут тоже есть
    http://www.w3school.ru/blog/web-development/85-ajax-javascript-solutions-for-professional-coding.html
     
    Dark Angell нравится это.
  3. Dark Angell

    Dark Angell Читатель

    Заблокирован
    Регистр.:
    29 фев 2008
    Сообщения:
    1.035
    Симпатии:
    690
    не проканывает,увеличивает скорость страницы на загрузку к общей массе страницы на 0.08,общая скорость 0.25
     
  4. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.134
    Симпатии:
    668
    вот без скриптов пример
    http://www.3point7designs.com/blog/cssdomtabs.html
    Описание тут
    http://www.3point7designs.com/blog/2007/09/12/css-tabs-css-only-dom-tabs/
     
    Dark Angell нравится это.
  5. funest

    funest Постоялец

    Регистр.:
    2 июл 2007
    Сообщения:
    145
    Симпатии:
    38
    Как вариант:
    Стили
    HTML:
    
    #container{
    	width:900px;
    	height:400px;
    	background: #00CCFF;
    	padding:10px;
    	margin:0 auto;
    }
    #links{
    	width:100%;
    	background:#CCCC00;
    }
    .tab{
    	width:100px;
    	float:left;
    	margin:10px;
    	text-align:center;
    }
    #content{
    	width:100%;
    	position:relative;
    }
    .con{
    	width:880px;
    	height:300px;
    	padding:10px;
    	position:absolute;
    	color:#fff;
    }
    #one{
    	background:#3333CC;
    	z-index:1;
    }
    #two, #three, #four, #five{
    	z-index:0;
    }
    #two {
    	background:#00FFCC;
    }
    #three{
    	background:#99FF66;
    }
    #four{
    	background:#FF9966;
    }
    #five{
    	background:#FFFFFF;
    }
    js
    HTML:
    <script type="text/javascript">
    	function clickTab(id){
    		document.getElementById('one').style.zIndex=0;
    		document.getElementById('two').style.zIndex=0;
    		document.getElementById('three').style.zIndex=0;
    		document.getElementById('four').style.zIndex=0;
    		document.getElementById('five').style.zIndex=0;
    		document.getElementById(id).style.zIndex=1;
    	}
    </script>
    
    дивы
    HTML:
    <div id="container">
    	<div id="tabs">
        	<div id="links">
            	<div class="tab"><a href="#" onclick="clickTab('one')">Вкладка 1</a></div>
                <div class="tab"><a href="#" onclick="clickTab('two')">Вкладка 2</a></div>
                <div class="tab"><a href="#" onclick="clickTab('three')">Вкладка 3</a></div>
                <div class="tab"><a href="#" onclick="clickTab('four')">Вкладка 4</a></div>
                <div class="tab"><a href="#" onclick="clickTab('five')">Вкладка 5</a></div>
            </div>
            <div id="content">
            	<div class="con" id="one">Контент 1</div>
                <div class="con" id="two">Контент 2</div>
                <div class="con" id="three">Контент 3</div>
                <div class="con" id="four">Контент 4</div>
                <div class="con" id="five">Контент 5</div>
            </div>
        </div>
    </div>
    
    Простенько все, с оформлением я особо не заморачивался. Если не совсем понятно что за что отвечает - могу прокомментировать.
     
  6. Jameson

    Jameson Читатель

    Заблокирован
    Регистр.:
    25 июн 2007
    Сообщения:
    406
    Симпатии:
    92
    Забавно, но в Опере (9.64@XP) не работает.
     
  7. xDina

    xDina Создатель

    Регистр.:
    14 фев 2009
    Сообщения:
    38
    Симпатии:
    9
    ну собственно эту штуку можно было из шаба britneyzone.ru выдернуть :)
     
  8. StrangeCat

    StrangeCat Создатель

    Регистр.:
    15 июл 2009
    Сообщения:
    43
    Симпатии:
    2
    покажите исходный скрипт плз
     
  9. funest

    funest Постоялец

    Регистр.:
    2 июл 2007
    Сообщения:
    145
    Симпатии:
    38
    Вообще-то очень много вариантов сделать вкладки при помощи различных скриптов:

    Перейти по ссылке
    Перейти по ссылке
    Перейти по ссылке
    Перейти по ссылке
    Перейти по ссылке
    Перейти по ссылке
    Перейти по ссылке

    Но для меня лично проще написать нечто подобное типо того, что я писал выше.
     
  10. Jameson

    Jameson Читатель

    Заблокирован
    Регистр.:
    25 июн 2007
    Сообщения:
    406
    Симпатии:
    92
    Ах, чорт, и правда! Каждый день там зависаем же, как не заметили!?! :D:p

    p.s. Кстати, открыл это (ваше?) творение... и где там табы на CSS без скриптов, которые тут обсуждаются? Где там вообще табы?
     
Статус темы:
Закрыта.