табы на css

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

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

    Dark Angell Читатель

    Заблокирован
    Регистр.:
    29 фев 2008
    Сообщения:
    1.036
    Симпатии:
    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.noupe.com/javascript/37-great-ajax-css-tab-based-interfaces.html

    и тут тоже есть
    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.036
    Симпатии:
    690
    не проканывает,увеличивает скорость страницы на загрузку к общей массе страницы на 0.08,общая скорость 0.25
     
  4. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    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
    Вообще-то очень много вариантов сделать вкладки при помощи различных скриптов:

    http://nettuts.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
    http://www.barelyfitz.com/projects/tabber/
    http://www.kminek.pl/lab/yetii/
    http://www.crackajax.net/tabs.php
    http://blog.cutterscrossing.com/index.cfm/2007/6/15/Updated-JQuery-Nested-Tab-Set-with-Demo
    http://wiki.github.com/madrobby/scriptaculous/tabs
    http://www.nyokiglitter.com/tutorials/tabs.html

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

    Jameson Читатель

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

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