Как заставить следующую кнопку переключаться между вкладками в jquery? - PullRequest
Новая
       1

Как заставить следующую кнопку переключаться между вкладками в jquery?

0 голосов
/ 09 января 2020

Итак, у меня есть эти вкладки, с которыми я пытаюсь получить ссылки для работы, поэтому, когда пользователь находится в нижней части вкладки и нажимает следующую, она открывает следующую вкладку. Кажется достаточно простым, но я не уверен, почему они не будут работать. Я построил jsfiddle с кодом, который я использую для вкладок, а также для следующих и предыдущих ссылок здесь:

https://jsfiddle.net/NoJqueryMaster/6Ltsphf7/61/

Извините за длительный пост, подумал, это поможет ради ясности. Как я уже говорил, я пытаюсь достичь, просто нажав на следующую ссылку, и она открывает следующую вкладку. 

//Fancy tabs selection
var numItems = $('li.fancyTab').length;
if (numItems == 12) {
  $("li.fancyTab").width('8.3%');
}
if (numItems == 11) {
  $("li.fancyTab").width('9%');
}
if (numItems == 10) {
  $("li.fancyTab").width('10%');
}
if (numItems == 9) {
  $("li.fancyTab").width('11.1%');
}
if (numItems == 8) {
  $("li.fancyTab").width('12.5%');
}
if (numItems == 7) {
  $("li.fancyTab").width('14.2%');
}
if (numItems == 6) {
  $("li.fancyTab").width('16.666666666666667%');
}
if (numItems == 5) {
  $("li.fancyTab").width('20%');
}
if (numItems == 4) {
  $("li.fancyTab").width('25%');
}
if (numItems == 3) {
  $("li.fancyTab").width('33.3%');
}
if (numItems == 2) {
  $("li.fancyTab").width('50%');
}

$(window).load(function() {

  $('.fancyTabs').each(function() {

    var highestBox = 0;
    $('.fancyTab a', this).each(function() {

      if ($(this).height() > highestBox)
        highestBox = $(this).height();
    });

    $('.fancyTab a', this).height(highestBox);

  });
});


   

$("#tabs").tabs();
            $(".nexttab").click(function() {
	       let indexActiveTab = $('#fancyTabWidget .tab ').find('.active').eq();
		 $('#fancyTabWidget .tab ').removeClass('active');
		 $('#fancyTabWidget .tab:eq('+indexActiveTab+1+') ').addClass('.active');
		//alert(selected);
		var selected = $("#tabs").tabs("option", "selected");
		$("#tabs").tabs("option", "selected", selected + 1);
	});
	$(".prevtab").click(function() {
		let indexActiveTab = $('#fancyTabWidget .tab ').find('.active').eq();
		$('#fancyTabWidget .tab ').removeClass('active');
		$('#fancyTabWidget .tab:eq('+indexActiveTab-1+') ').addClass('.active');
		var selected = $("#tabs").tabs("option", "selected");
        $("#tabs").tabs("option", "selected", selected - 1);
	});
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

a {
  text-decoration: none !important;
  color: #333 !important;
}

.fancyTab {
  text-align: center;
  padding: 15px 0;
  background-color: #eee;
  box-shadow: 0 0 0 1px #ddd;
  top: 15px;
  transition: top 0.2s;
}

.fancyTab.active {
  top: 0;
  transition: top 0.2s;
  background: #fff;
  box-shadow: 1px 1px 0 1px #fff, 0 0px 0 1px #ddd, -1px 1px 0 0px #ddd inset;
  padding-bottom: 30px;
}

.whiteBlock {
  display: none;
}

.fancyTab.active .whiteBlock {
  display: block;
  height: 2px;
  bottom: -2px;
  background-color: #fff;
  width: 99%;
  position: absolute;
  z-index: 1;
}

.fancyTab a {
  font-size: 1.65em;
  font-weight: 300;
  transition: 0.2s;
  color: #333;
}

.fancyTabs {
  border-bottom: 2px solid #ddd;
  margin: 15px 0 0;
}

li.fancyTab a {
  padding-top: 15px;
  top: -15px;
  padding-bottom: 0;
}

.fancyTab a:focus {
  outline: none;
}

li.fancyTab.active a {
  padding-top: inherit;
}

.fancyTab .fa {
  font-size: 40px;
  width: 100%;
  padding: 15px 0 5px;
  color: #666;
}

.fancyTab.active .fa {
  color: #cfb87c;
}

.fancyTabContent {
  border-color: transparent;
  box-shadow: 0 -2px 0 -1px #fff, 0 0 0 1px #ddd;
  padding: 30px 15px 15px;
  position: relative;
  background-color: #fff;
}

.nav-tabs>li.fancyTab {
  margin-right: 0;
  margin-bottom: 0;
}

.nav-tabs>li.fancyTab>a {
  margin-right: 0;
  border-top: 0;
  padding-bottom: 30px;
  margin-bottom: -30px;
}

.nav-tabs>li.fancyTab:hover a {
  border-color: transparent;
}

.nav-tabs>li.fancyTab:last-child a {
  border-right: 1px solid transparent;
}

.nav-tabs>li.fancyTab.active>a,
.nav-tabs>li.fancyTab.active>a:focus,
.nav-tabs>li.fancyTab.active>a:hover {
  border-width: 0;
}

.nav-tabs>li.fancyTab:hover {
  background-color: #f9f9f9;
  box-shadow: 0 0 0 1px #ddd;
}

.nav-tabs>li.fancyTab.active:hover {
  background-color: #fff;
  box-shadow: 1px 1px 0 1px #fff, 0 0px 0 1px #ddd, -1px 1px 0 0px #ddd inset;
}

.nav.nav-tabs .fancyTab a[data-toggle="tab"] {
  background-color: transparent;
  border-bottom: 0;
}

.nav-tabs>li.fancyTab.active:last-child {
  border-right: 0px solid #ddd;
  box-shadow: 0px 2px 0 0px #fff, 0px 0px 0 1px #ddd;
}

.fancyTab:last-child {
  box-shadow: 0 0 0 1px #ddd;
}

.tabs .nav-tabs li.fancyTab.active a {
  box-shadow: none;
  top: 0;
}

.arrow-down {
  display: none;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 22px solid #ddd;
  position: absolute;
  top: -1px;
  left: calc(50% - 20px);
}

.arrow-down-inner {
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 12px solid #fff;
  position: absolute;
  top: -22px;
  left: -18px;
}

.fancyTab.active .arrow-down {
  display: block;
}

@media (max-width: 1200px) {
  .fancyTab .fa {
    font-size: 36px;
  }
  .fancyTab .hidden-xs {
    font-size: 22px;
  }
}

@media (max-width: 992px) {
  .fancyTab .fa {
    font-size: 33px;
  }
  .fancyTab .hidden-xs {
    font-size: 18px;
    font-weight: normal;
  }
}

@media (max-width: 768px) {
  .fancyTab>a {
    font-size: 18px;
  }
  .nav>li.fancyTab>a {
    padding: 15px 0;
    margin-bottom: inherit;
  }
  .fancyTab .fa {
    font-size: 30px;
  }
  .nav-tabs>li.fancyTab>a {
    border-right: 1px solid transparent;
    padding-bottom: 0;
  }
  .fancyTab.active .fa {
    color: #333;
  }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery.min.css">
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="container-fluid" style="margin-bottom: 50px;">
  <div class="row">
    <div class="col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-4 col-lg-offset-4" style="padding-top:50px;">
      <section id="fancyTabWidget" class="tabs t-tabs">
        <ul class="nav nav-tabs fancyTabs" role="tablist">
          <li class="tab fancyTab active">
            <div class="arrow-down">
              <div class="arrow-down-inner"></div>
            </div>
            <a id="tab0" href="#tabBody0" role="tab" aria-controls="tabBody0" aria-selected="true" data-toggle="tab" tabindex="0"><span class="fa fa-bars"></span><span class="hidden-xs">Details</span></a>
            <div class="whiteBlock"></div>
          </li>

          <li class="tab fancyTab">
            <div class="arrow-down">
              <div class="arrow-down-inner"></div>
            </div>
            <a id="tab1" href="#tabBody1" role="tab" aria-controls="tabBody1" aria-selected="true" data-toggle="tab" tabindex="0"><span class="fa fa-calendar-o"></span><span class="hidden-xs">Plans</span></a>
            <div class="whiteBlock"></div>
          </li>
        </ul>

        <div id="myTabContent" class="tab-content fancyTabContent" aria-live="polite">
          <div class="tab-pane  fade active in" id="tabBody0" role="tabpanel" aria-labelledby="tab0" aria-hidden="false" tabindex="0">
            <div>
              <div class="row">
                <div class="col-md-12 text-center">
                  <p>
                    <h2>Details</h2>
                    <div class="panel-group">
                      <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingNine" style="padding:20px;color:#333;">
                        </div>
                      </div>
                      <div class="row" style="padding-top: 25px;">
                        <div class="col-sm-12">
                          <a class="nexttab pull-right" href="#"><span class="titleFontAdminTitle">NEXT <i class="fa fa-chevron-right"></i></span></a>
                        </div>
                      </div>
                    </div>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane  fade" id="tabBody1" role="tabpanel" aria-labelledby="tab1" aria-hidden="true" tabindex="0">
            <div class="row">
              <div class="col-md-12">
                <p>
                  <div class="row text-center" style="padding-top:25px;">
                    <div class="col-sm-12">
                      <div class="panel panel-success">
                        <div class="panel-body text-center">
                          <h2>Plans</h2>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row" style="padding-top: 25px;">
                    <div class="col-sm-12">
                      <a class="prevtab" href="#"><span class="titleFontAdminTitle"><i class="fa fa-chevron-left"></i> PREV</span></a>
                      <a class="nexttab pull-right" href="#"><span class="titleFontAdminTitle">NEXT <i class="fa fa-chevron-right"></i></span></a>
                    </div>
                  </div>
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 09 января 2020

Прежде всего, вам следует переписать $(window).load с $(window).on('load', function(){}, это вызывает ошибку (из-за старого синтаксиса jQuery). Вот ваш рабочий форк:

https://jsfiddle.net/hirdbluebird/rdc3so9e/

По сути, ваш jQuery код: 

// On direct tab click
$('.fancyTabs .tab').on('click', function(e) {
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
})
// On nexttab click
$('#fancyTabWidget .nexttab').on('click', function() {
    $('#fancyTabWidget .tab.active').removeClass('active').next().tab('show');
})
// On prev tab click
$('#fancyTabWidget .prevtab').on('click', function() {
    $('#fancyTabWidget .tab.active').removeClass('active').prev().tab('show');
})
0 голосов
/ 09 января 2020

Нажав кнопку, вы можете активировать индекс текущей вкладки и удалить класс, после чего вы можете добавить активный класс к следующему или предыдущему индексу, который вы можете найти по индексу, используя eq () jQuery function 

$(".nexttab").click(function() {
      let indexActiveTab = $('#fancyTabWidget .tab ').find('.active').eq();
      $('#fancyTabWidget .tab ').removeClass('active');
      $('#fancyTabWidget .tab:eq('+indexActiveTab+1+') ').addClass('.active');
      alert(selected);
      var selected = $("#tabs").tabs("option", "selected");
      $("#tabs").tabs("option", "selected", selected + 1);
    });
    $("#tabs").tabs();
    $(".prevtab").click(function() {
        let indexActiveTab = $('#fancyTabWidget .tab ').find('.active').eq();
        $('#fancyTabWidget .tab ').removeClass('active');
        $('#fancyTabWidget .tab:eq('+indexActiveTab-1+') ').addClass('.active');
          var selected = $("#tabs").tabs("option", "selected");
        $("#tabs").tabs("option", "selected", selected - 1);
    });

Надеюсь, это поможет:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...