Форум

max1985 · #1 (**permalink**) 04.12.2020, 17:41

Здравствуйте!
Помогите допилить вкладки сделанные на бутстрап 3
Сейчас код выглядит так:

<div class="row techno-description" role="tabpanel" id="myTab">
<div id="cf7" class="shadow">
  <img class="opaque" src="/img/bg/111.png" />
  <img src="/img/bg/222.png" />
  <img src="/img/bg/333.png" />
</div>
<ul class="nav nav-tabs techno-menu cf7_controls" id="guide-tabs">
  <li class="active" id="selected">
    <a class="first" data-toggle="tab" href="#1">111</a>
  </li>
  <li>
    <a class="first" data-toggle="tab" href="#2">222</a>
  </li>
  <li>
    <a class="first" data-toggle="tab" href="#3">333</a>
  </li>
</ul>	
</div>

<div class="tab-content">
  <div class="tab-pane active" id="1">
    <div class="row">
  <div class="col-md-3 img-box">
	  111
  </div>
  <div class="col-md-9 text-box">
  <p>Описание 111</p>
  <div class="descr"><a data-toggle="tab" href="#2"><img src="/img/compl/pr3.png" /></a></div>
  </div>
</div>
  </div>
  <div class="tab-pane" id="2">
    <div class="row">
  <div class="col-md-3 img-box">
      222
  </div>
  <div class="col-md-9 text-box">
  <div class="row">
  <p>Описание 222</p>
  <div class="descr"><a data-toggle="tab" href="#3"><img src="/img/compl/pr3.png" /></a></div>
  </div>
  </div>
</div>
  </div>
  <div class="tab-pane" id="3">
    <div class="row">
  <div class="col-md-3 img-box">
	  333
  </div>
  <div class="col-md-9 text-box">
  <p>Описание 333</p>
  <div class="descr"><a data-toggle="tab" href="#4"><img src="/img/compl/pr3.png" /></a></div>
  </div>
</div>
  </div>

<script>
$(document).ready(function() {
  $(".cf7_controls").on('click', 'li', function() {
    $("#cf7 img").removeClass("opaque");

    var newImage = $(this).index();

    $("#cf7 img").eq(newImage).addClass("opaque");

    $(".cf7_controls li").removeId("selected");
    $(this).addId("selected");
  });
});
</script>

</div>
Сейчас при переходе по такой ссылке внутри вкладки

<div class="descr"><a data-toggle="tab" href="#4"><img src="/img/compl/pr3.png" /></a></div>

содержимое вкладки открывается, а сам таб не меняется.
Подскажите чего не хватает?
Спасибо!

рони · #2 (**permalink**) 04.12.2020, 17:47

Сообщение от max1985

$(".cf7_controls li").removeId("selected");
$(this).addId("selected");

???
может вы хотели так

$(".cf7_controls li").removeClass("selected");
    $(this).addClass("selected");

max1985 · #3 (**permalink**) 04.12.2020, 17:55

Сообщение от рони

???
может вы хотели так

$(".cf7_controls li").removeClass("selected");
    $(this).addClass("selected");

Тот скрипт не при чем, он меняет фото над табами при переходе по ним

рони · #4 (**permalink**) 04.12.2020, 17:56

max1985,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .opaque{
      border: 5px solid #FF0000;
  }
  .active{
      border: 5px solid #008000;
  }
  .tab-pane{
      display: none;
  }
  .tab-pane.active{
      display:  block;
  }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<body>
<div class="row techno-description" role="tabpanel" id="myTab">
<div id="cf7" class="shadow">
  <img class="opaque" src="/img/bg/111.png" />
  <img src="/img/bg/222.png" />
  <img src="/img/bg/333.png" />
</div>
<ul class="nav nav-tabs techno-menu cf7_controls" id="guide-tabs">
  <li class="active" >
    <a class="first" data-toggle="tab" href="#1">111</a>
  </li>
  <li>
    <a class="first" data-toggle="tab" href="#2">222</a>
  </li>
  <li>
    <a class="first" data-toggle="tab" href="#3">333</a>
  </li>
</ul>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="1">
    <div class="row">
  <div class="col-md-3 img-box">
	  111
  </div>
  <div class="col-md-9 text-box">
  <p>Описание 111</p>
  <div class="descr"><a data-toggle="tab" href="#2"><img src="/img/compl/pr3.png" /></a></div>
  </div>
</div>
  </div>
  <div class="tab-pane" id="2">
    <div class="row">
  <div class="col-md-3 img-box">
      222
  </div>
  <div class="col-md-9 text-box">
  <div class="row">
  <p>Описание 222</p>
  <div class="descr"><a data-toggle="tab" href="#3"><img src="/img/compl/pr3.png" /></a></div>
  </div>
  </div>
</div>
  </div>
  <div class="tab-pane" id="3">
    <div class="row">
  <div class="col-md-3 img-box">
	  333
  </div>
  <div class="col-md-9 text-box">
  <p>Описание 333</p>
  <div class="descr"><a data-toggle="tab" href="#4"><img src="/img/compl/pr3.png" /></a></div>
  </div>
</div>
  </div>
<script>
$(function() {
  $(".cf7_controls").on('click', 'li', function() {
    var index = $(this).index();
    $("#cf7 img").removeClass("opaque").eq(index).addClass("opaque");
    $(".cf7_controls li").removeClass("active").eq(index).addClass("active");
    $(".tab-pane").removeClass("active").eq(index).addClass("active");
  });
});
</script>
</div>
</body>
</html>

рони · #5 (**permalink**) 04.12.2020, 17:57

Сообщение от max1985

Тот скрипт не при чем,

откуда это removeId и addId?

max1985 · #6 (**permalink**) 04.12.2020, 18:04

рони,
https://prnt.sc/vvu7ij
Не меняется таб при переходе по этой ссылке...

рони · #7 (**permalink**) 04.12.2020, 18:34

max1985,
здесь код работает? если нет то, какой браузер?

рони · #8 (**permalink**) 04.12.2020, 18:39

max1985,
можно только гадать, возможно у вас нет jquery для $, тогда нужно все $ заменить на jQuery

jQuery(function() {
  jQuery(".cf7_controls").on('click', 'li', function() {
    var index = jQuery(this).index();
    jQuery("#cf7 img").removeClass("opaque").eq(index).addClass("opaque");
    jQuery(".cf7_controls li").removeClass("active").eq(index).addClass("active");
    jQuery(".tab-pane").removeClass("active").eq(index).addClass("active");
  });
});

max1985 · #9 (**permalink**) 04.12.2020, 18:46

Сообщение от рони

max1985,
можно только гадать, возможно у вас нет jquery для $, тогда нужно все $ заменить на jQuery

jQuery(function() {
  jQuery(".cf7_controls").on('click', 'li', function() {
    var index = jQuery(this).index();
    jQuery("#cf7 img").removeClass("opaque").eq(index).addClass("opaque");
    jQuery(".cf7_controls li").removeClass("active").eq(index).addClass("active");
    jQuery(".tab-pane").removeClass("active").eq(index).addClass("active");
  });
});

jquery есть и все абсолютно так же работает как и с Вашим скриптом, единственное таб не становиться активным и вверху картинка не меняется при нажатии на кнопку <div class="descr"><a data-toggle="tab" href="#4"><img src="/img/compl/pr3.png" /></a></div>
, а содержимое меняется.
При переходе по табам все ок!

max1985 · #10 (**permalink**) 04.12.2020, 20:10

Сообщение от рони

max1985

Сейчас ссылке присвоил онклик

<div class="descr"><a onclick="$('a[href=\'#2\']').trigger('click');"><img src="/img/compl/pr3.png" /></a></div>

теперь при нажатии на нее, картинка сверху изменилась, а таб не сменился

Форум

Справочник

Discord чат

Курсы javascript