Задать вопрос
@Valdossss
javascript

Как поправить код табов?

Народ подскажите как решить,есть код табов.Когда добавляешь 1 таб все работает,а когда 2 то работает только второй даже при клике на первый.Помогите плиз,это срочно.
(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);
$(document).ready(function(){
	$(".tabs").lightTabs();
});
  • Вопрос задан
  • 53 просмотра
Комментировать
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ответы на вопрос 1
@AUser0
Чем больше знаю, тем лучше понимаю, как мало знаю.
Проверяйте структуру HTML. Видимо у вас один <DIV> находится внутри другого.
Вот этот код работает вполне корректно:
<html>
<head>
<script src='https://code.jquery.com/jquery-3.4.1.js'></script>
</head>
<body>
<div class='tabs'>
<ul><li>Tab1</li><li>Tab2</li></ul>
<div><div style='display:none;'>1111</div><div style='display:none;'>2222</div></div>
</div>

<script type='text/javascript'><!--
(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);
$(document).ready(function(){
  $(".tabs").lightTabs();
});
//--></script>
</body>
</html>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript Developer (backend / fullstack)
Brightdata • Тель-Авив
от 5 500 до 6 500 $
JavaScript FullStack разработчик
Rocket • Брянск
от 60 000 до 100 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Логотоив Пиксель Арт
22 мая 2024, в 20:14
3600 руб./за проект
Написать курсовую работу(тема в описании)
22 мая 2024, в 20:08
3000 руб./за проект
Доработать, доделать браузерную игру
22 мая 2024, в 20:01
600000 руб./за проект
Ещё заказы