вкладки табы js [закрыт]

227
03 февраля 2020, 01:10
Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Переформулируйте вопрос, чтобы он соответствовал тематике «Stack Overflow на русском».

Закрыт 10 месяцев назад.

Почем не работа ? 

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head>
<body>
    <style>
    body {
        background-color: #cddcdc;
    }
    .left {
        position: fixed;
        top: 0px;
        width: auto;
        background-color: #2c2f36;
        height: 100%;
    }
    .img {
        padding: 5px;
        margin-left: 1px;
    }
    #wr-tabs {}
    #wr-tabs .tabs {}
    #wr-tabs .tabs:after {
        content: "";
        display: block;
        clear: both;
        height: 0;
            padding-top:10px;
        padding-bottom:10px;
    }
    #wr-tabs .tabs .tab {
        float: left;
        cursor: pointer;
            padding-top:10px;
        padding-bottom:10px;
    }
    #wr-tabs .tabs .tab:last-child {
        border-right: none;
            padding-top:10px;
        padding-bottom:10px;
    }
    #wr-tabs .img .tabs .tab:hover,
    #wr-tabs .tabs .tab.active {
    padding-top:10px;
        padding-bottom:10px;
        background-color: #00000040;
        color: white;
        border-left: 3px solid #27a7a7;
        width:250px;
    }
    #wr-tabs .content {
        background-color: #fff;
    }
    #wr-tabs .content .tab-cont {
        display: none;
    }
    #wr-tabs .content .tab-cont.active {
        display: block;
    }
    img {
        filter: invert(0.7);
    }
    .inpu {
        border: none;
        border: 1px solid black;
        padding: 7px;
        border-radius: 5px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script type="text/javascript">
    $(function() {
        $("#wr-tabs").on("click", ".tab", function() {
            var tabs = $("#wr-tabs .tab"),
                cont = $("#wr-tabs .tab-cont");
            // Удаляем классы active
            tabs.removeClass("active");
            cont.removeClass("active");
            // Добавляем классы active
            $(this).addClass("active");
            cont.eq($(this).index()).addClass("active");
            return false;
        });
    });
    $(".js-popup-hover").hover(function() {
        var $this = $(this),
            popupId = $this.attr("href");
        $(popupId).fadeIn();
    }, function() {
        $(".js-popup").fadeOut();
    });
    $(function() {
        $('[data-toggle="tooltip"]').tooltip()
    })
    </script>
    <?php
    require_once('db.php');
require_once('mysqli_db.php');
  $array = json_decode($_COOKIE['x'], true);
  $id = $array['id'];
$c=mysqli_query($dbf,"SELECT * FROM userss WHERE id = '$id'");
foreach ($c as $key => $value) {
}   
    ?>
    <header style="width: 100%; height:60px; background-color: white; padding-top: 15px;" class="left"> 
<form method = "POST" style="margin-left:80%" class=""><button type="button" class="btn btn-outline-info" data-toggle="modal" data-target="#exampleModal">
  Создать нового бота 
</button></form>
        <button type="button" class=" dropdown-toggle" style="background-color: unset;border: none; margin-left: 90%; position:relative; top:-30px;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><?php echo $value['name'];?></button>
        <div class="dropdown-menu"> <a class="dropdown-item" href="logout.php">выход</a> </div>
    </header>
    <div class="left">
    <div id="wr-tabs">  
            <div class="tabs" style = ''>

                <div class="tab active  " style=' padding-left:20px;' ><img src='/microchip-solid.svg' width='25' class='svg' style='margin-right:10px;' >Боты</div><br><br><br>
                <div class="tab  " style='padding-left:20px;'><img src='credit-card-regular.svg' width='25'class='svg' style='margin-right:10px;' >Тарифы</div><br><br>
                <div class="tab  " style='padding-left:20px;'><img src='history-solid.svg' width='25'class='svg' style='margin-right:10px;' >История</div><br><br><br>
                <div class="tab " style='; padding-left:20px;'><img src='question-circle-regular.svg' width='25' class='svg' style='margin-right:10px;' >Клиенты</div><br><br>
                <div class="tab  " style=' padding-left:20px;'><img src='link-solid.svg' width='25' style='margin-right:10px;' class='svg' >Условия</div><br>
<script
  src="https://code.jquery.com/jquery-3.4.0.js"
  integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo="
  crossorigin="anonymous"></script>
<script type="text/javascript">
          jQuery('img.svg').each(function(){
            var $img = jQuery(this);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');
            jQuery.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');
                // Add replaced image ID to the new SVG
                if(typeof imgID !== 'undefined') {
                    $svg = $svg.attr('id', imgID);
                }
                // Add replaced image classes to the new SVG
                if(typeof imgClass !== 'undefined') {
                    $svg = $svg.attr('class', imgClass+' replaced-svg');
                }
                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');
                // Replace image with new SVG
                $img.replaceWith($svg);
            }, 'xml');
        });
</script>
<style type="text/css">
.svg {
  width:25px; 
  margin-right:10px;
}
    svg path {
    width:25px;
}
    svg:hover path {
    width:25px;
}
</style>    
        <style> 
        .tab {
        color:#90a4ae;
            font-size:17px;
        }
            .tab:hover {
            color:white;
        }
        </style>
            </div>
        </div>>
    </div>
       <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Новый бот</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <?php   $c3=mysqli_query($dbf,"SELECT * FROM userss WHERE id = '{$array['id']}' ");  
foreach ($c3 as $key => $value) {
}
if ($value['part'] == 1) {
 ?>
       <p>На какой промежуток времени?</p>
       <form method='POST'>
       <input type='date' name='date' class='btn btn-outline-info btn-block form-control'>
       <input type='submit' name='sum' class='btn btn-info  btn-block form-control' ></form>
      <?php 
}else {
    ?>
<h4>Вы не являетесь партнером!</h4>
    <?php
}
     ?>
      </div>
    </div>
  </div>
</div>
            <main id="wr-tabs" style="">
            <div class="content" style="">
                <div class="tab-cont active " style="  ">


<?php 
require_once('db.php');
require_once('mysqli_db.php');
$array = json_decode($_COOKIE['x'], true);
if (isset($_POST['sum'])) {
        $co = mt_rand(1,1);
$c=mysqli_query($dbf,"SELECT * FROM getway WHERE stat = 0 LIMIT 1");
    foreach ($c as $key => $value) {
    }
    $f = array('h','a','q','f','b','k','p','H','op','Q','z','i','v','1','2','8','0','23','5','@','','0df','231f','5f','@f','f');
for ($i=0; $i <5 ; $i++) { 
$e = mt_rand(0,count($f));
$o .= $f[$e];
}
    $f1 = array('h','a','q','f','b','k','p','H','op','Q','z','i','v','1','2','8','0','23','5','@','','0df','231f','5f','@f','f');
for ($i=0; $i <5 ; $i++) { 
$e1 = mt_rand(0,count($f1));
$o1 .= $f1[$e1];
}
    $f2 = array('h','a','q','f','b','k','p','H','op','Q','z','i','v','1','2','8','0','23','5','@','','0df','231f','5f','@f','f');
for ($i=0; $i <5 ; $i++) { 
$e2 = mt_rand(0,count($f2));
$o2 .= $f2[$e2];
}
    $f29 = array('h','a','q','f','b','k','p','H','op','Q','z','i','v','1','2','8','0','23','5','@','','0df','231f','5f','@f','f');
for ($i=0; $i <5 ; $i++) { 
$e29 = mt_rand(0,count($f29));
$o29 .= $f2[$e29];
}
  $us =R::dispense('bots');
            $us->num =  '+77777777777';
             $us->id3 =  $array['id'] ;
    $us->name =  'Пример';
        $us->lid =  0;
        $us->start=  'Привет, я бот!';
        $us->Qr = ' '  ;
        $us->text = 'Текст на который бот будет отзываться';
    $us->rab = ' ';
      $us->constr = $o;
       $us->constr2 = $o1;
       $us->constr3 = $o2;
            $us->constr4 = $o29;
          $us->datte= $_POST['date'] ;
$us->value = 0;
$us->doc = $_POST['doc'];
    R::store($us);
 mysqli_query( $dbf ,"UPDATE getway SET stat='{$value["id"]}' WHERE id='{$value["id"]}'");
}
 ?>
 <div  >


            <table class="table-light  table-striped" style='margin-top:60px;float:right; border-radius:10px; '>
  <thead class="thead-dark">
    <tr>
      <th scope="col" style="font-weight: bold; font-size: 20px; padding-left:70px;">Номер</th>
      <th scope="col" style="font-weight: bold; font-size: 20px;">Имя</th>
      <th scope="col" style="font-weight: bold; font-size: 20px;">Лиды</th>
      <th scope="col" style="font-weight: bold; font-size: 20px;">Ссылки</th>

      <th scope="col" style="font-weight: bold; font-size: 20px; margin-right: 60px;">Тест</th>
         <th scope="col" style="font-weight: bold; font-size: 20px; margin-right: 60px;">Документы</th>
    </tr>
  </thead>
  <tbody>
   <?php 
 $query8 = "SELECT * FROM userss
INNER JOIN bots  WHERE userss.id = bots.id3 and bots.id3 ='{$array['id']}'" ;
$r8 = $dbf-> query($query8);
foreach ($r8 as  $value) {
        $query81 = "SELECT COUNT(*) FROM pep  WHERE em = '{$value['id']}'" ;
$r82 = $dbf-> query($query81);
foreach ($r82 as  $valuee) {
      foreach($valuee as $v) {
      }
}
$mo = date('Y-m-d');
        $query81a = "SELECT COUNT(*) FROM pep  WHERE em = '{$value['id']}' AND qa='$mo'" ;
$r82a = $dbf-> query($query81a);
foreach ($r82a as  $valueea) {
      foreach($valueea as $va) {
      }
}
$moa = date('d');
$moa = (int) $moa;
$moa -= 1;
$moa = date('Y-m-'.$moa);
        $query81aa = "SELECT COUNT(*) FROM pep  WHERE em = '{$value['id']}' AND qa='$moa'" ;
$r82aa = $dbf-> query($query81aa);
foreach ($r82aa as  $valueeaa) {
      foreach($valueeaa as $vaa) {
      }
}
?>

<form method="GET" class="" action="save.php">   
    <tr>    
    <th scope="row"><input type="text" class="inpu" style="margin-left: 52px; margin-right: 52px; width:186px;"  name="num" value=<?php echo $value['num']; ?>><br>
    <a href='inde.php?code=<?php echo $value['id']; ?>' name="save" class="btn btn btn-primary"  style="margin-left: 52px; margin-top:10px; background-color: #5c6bc0; color: white;">Настройки</a>
    <a  class="btn " style="margin-right: 15px; margin-left:15px; margin-top:10px; background-color: #5c6bc0; color: white;" href ='url.php?code=<?php echo $value['value'] ?>'>
QR
</a>
    </th>
      <td>  <input type="text" class="inpu" style="margin-right: 52px;" name="nm" value=<?php echo $value['name']; ?>><br>
         <input type="submit" name="save"  class="btn " style="margin-right:11px; margin-top:10px;  background-color: #5c6bc0; color: white;" value="Удалить" >
         <input type="submit" name="save" class="btn " style="margin-right: 11px; margin-top:10px; background-color: #5c6bc0; color: white;" value="Сохранить" ><br>
            <input type="hidden" style="margin-right: 60px;"  name="code" value=<?php echo $value['id'];; ?>>
      </td>
      <td>
<span style=' margin-right:10px;'>Всего  <?php echo  $v; ?></span><br>
<span style=' margin-right:10px;'>Сегодня <?php echo  $va; ?></span><br>
<span style='  margin-right:10px;'>Вчера <?php echo $vaa;  ?></span><br>

      </td>
      <td style='padding:20px;'><a class=''  href="http://gcbot.ru/p/<?php echo $value['constr4']; ?>">http://gcbot.ru/<?php echo $value['constr4']; ?></a> YD<hr>
<a class='' href="http://gcbot.ru/p/<?php echo $value['constr']; ?>">http://gcbot.ru/<?php echo $value['constr']; ?></a> INST<hr>
<a class='' style='margin-right: 20px;' href="http://gcbot.ru/p/<?php echo $value['constr2']; ?>">http://gcbot.ru/<?php echo $value['constr2']; ?></a> GA<hr>
<a class='' style='margin-right: 20px;' href="http://gcbot.ru/p/<?php echo $value['constr3']; ?>">http://gcbot.ru/<?php echo $value['constr3']; ?></a>FB
</td>
          <td><a href='check.php?fo=<?php echo $value['id'] ?>' class='' >Проверить бота</a><br>
    <?php
           if($value['rab'] == 1) {
             echo "<span class='text-danger'>Телефон не  подключен</span><br>";
        }
        if($value['rab'] == 2) {
                echo "<span  class='text-warning'>Шлюз заблокирован</span><br>";
        }
          if($value['rab'] == 3) {
               echo "<span  class='text-success'>Все хорошо</span><br>";
        }
    echo '<span >До '.$value['datte'].'</span>';
    ?>
    </td>

    <td style="text-align: center;">    
   <textarea name="doc" style="margin-right: 25px; margin-left:25px; "><?php  echo $value['doc']; ?></textarea></td>
    </tr>
    </form>
    <?php 
}
 ?>
  </tbody>
</table>
</form>
</div>
<style type="text/css">
    input {
        border:none;
        border:2px solid;
    padding: 10px;
    border-radius: 10px;
    }
    textarea {
        border:none;
        border:2px solid;
    padding: 10px;
    border-radius: 10px;
    }
</style>
<script
  src="http://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

 <script>
 var ajax_interval = setInterval(function(){
     var form_data = $(".form").serialize();
     $.ajax({
            type: "POST", 
            url: "url.php", 
            data: form_data,
            success: function (y) {
     $('.modal-body').empty();
      $('.modal-body').append(y);
            }
        });
}, 30000);
</script>
</div>

                    <div class="tab-cont " style="background-color: white; margin-top:40px; margin-left:60px;">
fggggggggggggggggggdhgggnfbvcvxvgfdhf
                </div>
                <div class="tab-cont " style="background-color: white;    margin-right:15px;">
                </div>
                                <div class="tab-cont " style="   text-align:center;">
                </div>
                <div class="tab-cont " style="background-color: white;    text-align:center;">
                </div>

            </div>
        </main>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Answer 1

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

Всё же запишу тут пример простейших табов, и наверно вы сможете применить их на вашей странице... 

const link = document.getElementsByClassName('link'); 
for(let i = 0; i < link.length; i++){ 
  //Перебираем все кнопки через цикл и кругами вешаем на них событие "click" 
  link[i].addEventListener('click',function(){ 
    const tab = document.getElementsByClassName('tab'); 
    for( let u = 0; u < link.length; u++){ 
      //еще раз запускаем цикл, кругами выполняя находящееся внутри для u=0,  
      //потом u = 1, u = 2 и т.д. до количества кнопок. Так как кол-во кнопок соответствует кол-ву табов,  
      //то можно нагло используя один цикл, сразу скрывать и все открытые табы,  
      //и снять активный класс со всех кнопок. 
      tab[u].style.display = 'none'; 
      link[u].classList.remove('active'); 
    } 
    //А когда все табы скрыты и все кнопки нейтральные... 
    //уже показываем нужный таб (где i уже заявлен = как-раз индекс кликнутой кнопки) 
    tab[i].style.display = 'block'; 
    //ну и добавляем класс на текущую кнопку, чтобы покрасить её как надо 
    this.classList.add('active'); 
  }); 
}
.tab {display: none; padding: 10px; border: 1px solid red; margin: 10px;} 
 
.active {background: #c00; color: white;} 
 
/*Здесь самое важное display: none; остальное - декорация*/
<button class="link">1111</button> 
<button class="link">2222</button> 
<button class="link">3333</button> 
 
<div class="tab">1111</div> 
<div class="tab">2222</div> 
<div class="tab">3333</div>

А то же самое на jQuery:

$(document).on('click', '.link', function(){ 
  $('.tab').hide(); 
  $('.link').removeClass('active');       
  $('.tab').eq( $('.link').index(this) ).show(); 
  // $('.link').index(this) - - эта страшная штука определчет число (индекс)  
  //Текущего кликнутого элемента. А .eq() привязывает это число к $('.tab') 
  //чтобы показать конкретный таб, а не сразу всё. 
  //Вот и получается, что берем номер кнопки и за счет него узнаем, какой 
  //таб надо показать  
  $(this).addClass('active'); 
});
    .tab {display: none; padding: 10px; border: 1px solid red; margin: 10px;} 
 
    .active {background: #c00; color: white;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<button class="link">1111</button> 
<button class="link">2222</button> 
<button class="link">3333</button> 
 
<div class="tab">1111</div> 
<div class="tab">2222</div> 
<div class="tab">3333</div>

На jQuery логика нагляднее видна. В обоих случаях сперва скрываются вообще все блоки, снимается "активный" (чисто-декоративный, чтобы пользователь понимал какая вкладка открыта сейчас) класс со всех кнопок, а потом добавляется активный класс на кликнутую кнопку и показывается тот блок, который соответствует по индексу - текущей кликнутой кнопке (this).

А в вашем коде... подозреваю, что может не работать в том числе и из-за того, что скрипты стоят выше, чем HTML

P.s. изначально писал $(this).index() - и конкретно здесь он криво работал. Заменил на $('.link').index(this) - заработало как надо. Но не понял почему)

READ ALSO
jquery ui autocomplete json
jQuery

jquery ui autocomplete json

Есть такой json файл:

 246
На элементах DOM не работает событие onclick
jQuery

На элементах DOM не работает событие onclick

Динамически добавляю элементы на страницу:

 213
Jquery показать вложенную таблицу при клике по tr
jQuery

Jquery показать вложенную таблицу при клике по tr

Имеется следующий макет

 204
Найти и переместить элемент
HTML

Найти и переместить элемент

Есть форма ввода:

 207