Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.11.2016, 07:56
Аспирант
Отправить личное сообщение для sergey24 Посмотреть профиль Найти все сообщения от sergey24
 
Регистрация: 04.11.2016
Сообщений: 56

Табы в табах:)
Подскажите, пожалуйста, как реализовать с данным скриптом табы в табах. Имеется 3 вкладки, в каждую из них надо засунуть ещё табы, как это реализовать? Заранее благодарен.
<div class="tabs">
    			<ul>
                                <li>Первая вкладка</li>
        			<li>Вторая вкладка</li>
        			<li>Третья вкладка</li>
    			</ul>
    			<div>
        			<div>
                        Содержимое первой вкладки, сюда надо ещё табы
                    </div>
                    <div>
                        Содержимое второй вкладки, сюда надо ещё табы
                    </div>
                    <div>
                        Содержимое третьей вкладки, сюда надо ещё табы
                    </div>
    			</div>            
			</div>

<script>
    $(document).ready(function(){
		$(".tabs").lightTabs();
	});
    </script>
    <script>(function($){				
	jQuery.fn.lightTabs = function(options){

		var createTabs = function(){
			tabs = this;
			i = 0;
			
			showPage = function(i){
				$(tabs).children("div").children("div").hide();
				$(tabs).children("div").children("div").eq(i).show();
				$(tabs).children("ul").children("li").removeClass("active");
				$(tabs).children("ul").children("li").eq(i).addClass("active");
			}
								
			showPage(0);				
			
			$(tabs).children("ul").children("li").each(function(index, element){
				$(element).attr("data-page", i);
				i++;                        
			});
			
			$(tabs).children("ul").children("li").click(function(){
				showPage(parseInt($(this).attr("data-page")));
			});				
		};		
		return this.each(createTabs);
	};	
	})(jQuery);
    </script>
Ответить с цитированием
  #2 (permalink)  
Старый 26.11.2016, 08:10
Аспирант
Отправить личное сообщение для sergey24 Посмотреть профиль Найти все сообщения от sergey24
 
Регистрация: 04.11.2016
Сообщений: 56

Вопрос решён. Ответ:
<script>
    $(document).ready(function(){
		$(".tabs").lightTabs();
	});
    </script>
    <script>(function($){               
    jQuery.fn.lightTabs = function(options){

        var createTabs = function(){
            tabs = this;
            i = 0;

            showPage = function(tabs, i){
                $(tabs).children("div").children("div").hide();
                $(tabs).children("div").children("div").eq(i).show();
                $(tabs).children("ul").children("li").removeClass("active");
                $(tabs).children("ul").children("li").eq(i).addClass("active");
            }

            showPage(tabs, 0);              

            $(tabs).children("ul").children("li").each(function(index, element){
                $(element).attr("data-page", i);
                i++;                        
            });

            $(tabs).children("ul").children("li").click(function(){
                showPage($(this).parent().parent(), parseInt($(this).attr("data-page")));
            });             
        };      
        return this.each(createTabs);
    };  
})(jQuery);
    </script>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Создать табы для меню сайта FARCER Элементы интерфейса 0 22.11.2015 17:57
Скроллинг в табах Veterinar Элементы интерфейса 10 06.12.2014 17:47
Неактивная вкладка в табах fabian89 jQuery 3 16.10.2014 15:42
Вложенные табы Тельман Элементы интерфейса 3 28.11.2013 16:49
Динамические Табы и drag&drop Surlik jQuery 3 16.11.2013 00:53