Блог

Главная - Вопросы по программированию - Как создать цикл табуляции с помощью jQuery и JavaScript?

Как создать цикл табуляции с помощью jQuery и JavaScript?

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Я создал вкладку, используя jQuery и JavaScript. Он работает нормально, но мне нужна одна модификация. Я хочу, чтобы тип цикла табуляции, как только мы дойдем до последнего, он должен перейти на первую вкладку, когда я нажимаю кнопку далее. но теперь это не цикл. Я перепробовал так много типов, но я не получаю результат, который я ожидал. Я добавил сюда свой код. кто-нибудь поможет мне это исправить.

 $(document).ready(function () {
    $(".tab_content div:not(:first)").toggle(),
        $(".previous").css({
            opacity: "0.8",
            cursor: "not-allowed"
        }),
        $(".tabs li").click(function () {
            var e = $(this).index();
            $(this).is(":last-child") ? $(".next").next("li").trigger("click") : $(".next").next("li").trigger("click"),
                $(this).is(":first-child") ? $(".previous").css({
                    opacity: "0.8",
                    cursor: "not-allowed"
                }) : $(".previous").css({
                    opacity: "1",
                    cursor: "pointer"
                });
            var t = $(this).position(),
                a = $(this).data("id");
            (scroll = $(".tabs").scrollLeft()),
            $(".tabs").animate({
                    scrollLeft: scroll   t.left - 30
                }, 200),
                $(".tab_content div").hide(),
                $("div."   a).toggle(),
                $(".tabs li").removeClass("active"),
                // $(`.tabs li:nth-child(${e   1})`).addClass("active");
                $(".tabs li:nth-child("   (e   1)   ")").addClass("active");
        }),
        $(".next").click(function (e) {
            e.preventDefault(), $("li.active").next("li").trigger("click");
        }),
        $(".previous").click(function (e) {
            e.preventDefault(), $("li.active").prev("li").trigger("click");
        });
});  
 .tabs_indicators li{
  height:5px;
  display: inline-block;
  cursor:pointer;
  width:5px;
  border-radius:50%;
  background:green;
}
ul{
  list-style:none;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Document</title>
   </head>
   <body>
      <div class="content_wrapper">
         <div class="tabs_wrapper">
            <ul class="tabs tab_border">
               <li data-id="contentOne" class="active">tab 1
               </li>
               <li data-id="contentTwo">
                  tab 2
               </li>
               <li data-id="contentThree">
                  tab 3
               </li>
               <li data-id="contentFour">
                  tab 4
               </li>
               <li data-id="contentFive">
                  tab 5
               </li>
               <li data-id="contentSix">
                  tab 6
               </li>
            </ul>
            <div class="d_flex">
               <div class="tabs_wrapper tabs_indicators">
                  <ul class="tabs  list_unstyled d_flex">
                     <li data-id="contentOne" class="active"></li>
                     <li data-id="contentTwo"></li>
                     <li data-id="contentThree"></li>
                     <li data-id="contentFour"></li>
                     <li data-id="contentFive"></li>
                     <li data-id="contentSix"></li>
                  </ul>
               </div>
               <div class="tab_controller d_flex ">
                  <span class="tab_btn previous mr-10">left arrow</span><br>
                  <span class="tab_btn next">right arrow</span>
               </div>
            </div>
         </div>
         <div class="tab_content">
            <div class="tab_content_item contentOne">
               content 1
            </div>
            <div class="tab_content_item contentTwo">
               content 2
            </div>
            <div class="tab_content_item contentThree">
               content 3
            </div>
            <div class="tab_content_item contentFour">
               content 4
            </div>
            <div class="tab_content_item contentFive">
               content 5
            </div>
            <div class="tab_content_item contentSix">
               content 6
            </div>
         </div>
      </div>
   </body>
</html>

Ответ №1:

Проверьте next , prev element есть ли

 $("li.active").next("li").length)

$("li.active").prev("li").length)
  

 $(document).ready(function () {
    $(document).ready(function() {
            $(".tab_content div:not(:first)").toggle(),
                $(".tabs li").click(function() {
                    var e = $(this).index();
                    var t = $(this).position(),
                        a = $(this).data("id");
                    (scroll = $(".tabs").scrollLeft()),
                    $(".tabs").animate({
                            scrollLeft: scroll   t.left - 30
                        }, 200),
                        $(".tab_content div").hide(),
                        $("div."   a).toggle(),
                        $(".tabs li").removeClass("active"),
                        // $(`.tabs li:nth-child(${e   1})`).addClass("active");
                        $(".tabs li:nth-child("   (e   1)   ")").addClass("active");
                }),
                $(".next").click(function(e) {
                    if ($("li.active").next("li").length) {
                        e.preventDefault(), $("li.active").next("li").trigger("click");
                    } else {
                        e.preventDefault(), $("li:first-child").trigger("click");
                    }
                }),
                $(".previous").click(function(e) {
                    if ($("li.active").prev("li").length) {
                        e.preventDefault(), $("li.active").prev("li").trigger("click");
                    } else {
                        e.preventDefault(), $("li:last-child").trigger("click");
                    }
                });
        });
 });  
 .tabs_indicators li{
  height:5px;
  display: inline-block;
  cursor:pointer;
  width:5px;
  border-radius:50%;
  background:green;
}
ul{
  list-style:none;
}
.tabs_indicators li.active{background:red;}
.tabs li.active{color:red;}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Document</title>
   </head>
   <body>
      <div class="content_wrapper">
         <div class="tabs_wrapper">
            <ul class="tabs tab_border">
               <li data-id="contentOne" class="active">tab 1
               </li>
               <li data-id="contentTwo">
                  tab 2
               </li>
               <li data-id="contentThree">
                  tab 3
               </li>
               <li data-id="contentFour">
                  tab 4
               </li>
               <li data-id="contentFive">
                  tab 5
               </li>
               <li data-id="contentSix">
                  tab 6
               </li>
            </ul>
            <div class="d_flex">
               <div class="tabs_wrapper tabs_indicators">
                  <ul class="tabs  list_unstyled d_flex">
                     <li data-id="contentOne" class="active"></li>
                     <li data-id="contentTwo"></li>
                     <li data-id="contentThree"></li>
                     <li data-id="contentFour"></li>
                     <li data-id="contentFive"></li>
                     <li data-id="contentSix"></li>
                  </ul>
               </div>
               <div class="tab_controller d_flex ">
                  <span class="tab_btn previous mr-10">left arrow</span><br>
                  <span class="tab_btn next">right arrow</span>
               </div>
            </div>
         </div>
         <div class="tab_content">
            <div class="tab_content_item contentOne">
               content 1
            </div>
            <div class="tab_content_item contentTwo">
               content 2
            </div>
            <div class="tab_content_item contentThree">
               content 3
            </div>
            <div class="tab_content_item contentFour">
               content 4
            </div>
            <div class="tab_content_item contentFive">
               content 5
            </div>
            <div class="tab_content_item contentSix">
               content 6
            </div>
         </div>
      </div>
   </body>
</html>

Ответ №2:

Вам просто нужно добавить 2 проверки:

  • Для «следующего» случая, если есть какой-либо следующий <li> элемент
  • Для случая «prev», если это какой-либо предыдущий <li> элемент

Просто измените свой js следующим образом:

 $(".next").click(function (e) {
    e.preventDefault();
    if($("li.active").next("li").length == 0) {
      $("li:first-child").trigger("click");
    } else {
      $("li.active").next("li").trigger("click");
    }
}),
$(".previous").click(function (e) {
    e.preventDefault();
    if($("li.active").prev("li").length == 0) {
      $("li:last-child").trigger("click");
    } else {
      $("li.active").prev("li").trigger("click");
    }
});
  

 $(document).ready(function () {
    $(".tab_content div:not(:first)").toggle(),
        $(".previous").css({
            opacity: "0.8",
            cursor: "not-allowed"
        }),
        $(".tabs li").click(function () {
            var e = $(this).index();
            $(this).is(":last-child") ? $(".next").next("li").trigger("click") :  $(".next").next("li").trigger("click"),
                $(this).is(":first-child") ? $(".previous").css({
                    opacity: "0.8",
                    cursor: "not-allowed"
                }) : $(".previous").css({
                    opacity: "1",
                    cursor: "pointer"
                });
            var t = $(this).position(),
                a = $(this).data("id");
            (scroll = $(".tabs").scrollLeft()),
            $(".tabs").animate({
                    scrollLeft: scroll   t.left - 30
                }, 200),
                $(".tab_content div").hide(),
                $("div."   a).toggle(),
                $(".tabs li").removeClass("active"),
                // $(`.tabs li:nth-child(${e   1})`).addClass("active");
                $(".tabs li:nth-child("   (e   1)   ")").addClass("active");
        }),
        $(".next").click(function (e) {
            e.preventDefault();
            if($("li.active").next("li").length == 0) {
              debugger;
              $("li:first-child").trigger("click");
            } else {
              $("li.active").next("li").trigger("click");
            }
        }),
        $(".previous").click(function (e) {
            e.preventDefault();
            if($("li.active").prev("li").length == 0) {
              $("li:last-child").trigger("click");
            } else {
              $("li.active").prev("li").trigger("click");
            }
        });
});  
 .tabs_indicators li{
  height:5px;
  display: inline-block;
  cursor:pointer;
  width:5px;
  border-radius:50%;
  background:green;
}
ul{
  list-style:none;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Document</title>
   </head>
   <body>
      <div class="content_wrapper">
         <div class="tabs_wrapper">
            <ul class="tabs tab_border">
               <li data-id="contentOne" class="active">tab 1
               </li>
               <li data-id="contentTwo">
                  tab 2
               </li>
               <li data-id="contentThree">
                  tab 3
               </li>
               <li data-id="contentFour">
                  tab 4
               </li>
               <li data-id="contentFive">
                  tab 5
               </li>
               <li data-id="contentSix">
                  tab 6
               </li>
            </ul>
            <div class="d_flex">
               <div class="tabs_wrapper tabs_indicators">
                  <ul class="tabs  list_unstyled d_flex">
                     <li data-id="contentOne" class="active"></li>
                     <li data-id="contentTwo"></li>
                     <li data-id="contentThree"></li>
                     <li data-id="contentFour"></li>
                     <li data-id="contentFive"></li>
                     <li data-id="contentSix"></li>
                  </ul>
               </div>
               <div class="tab_controller d_flex ">
                  <span class="tab_btn previous mr-10">left arrow</span><br>
                  <span class="tab_btn next">right arrow</span>
               </div>
            </div>
         </div>
         <div class="tab_content">
            <div class="tab_content_item contentOne">
               content 1
            </div>
            <div class="tab_content_item contentTwo">
               content 2
            </div>
            <div class="tab_content_item contentThree">
               content 3
            </div>
            <div class="tab_content_item contentFour">
               content 4
            </div>
            <div class="tab_content_item contentFive">
               content 5
            </div>
            <div class="tab_content_item contentSix">
               content 6
            </div>
         </div>
      </div>
   </body>
</html>

Комментарии:

1. Спасибо, приятель… это только я ожидал.

2. @sankar не забудьте также проголосовать за него 🙂 Это поможет другим пользователям

3. Да, конечно, я это сделал.