добавить пагинацию на вкладке кнопки java скрипт | следующий и предыдущий в списке UL на вкладке - PullRequest
Новая
       8

добавить пагинацию на вкладке кнопки java скрипт | следующий и предыдущий в списке UL на вкладке

0 голосов
/ 15 апреля 2020

Привет, это возможно для создания нумерации страниц на вкладках Кнопки, на самом деле содержимое нумерации страниц генерируется с помощью Php, поэтому они динамические c ..

На самом деле я хочу показать данные во вкладках, поэтому вот версия html 

$(document).ready(function() {  
 
$('#tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
$('#tabs li a').click(function(){
    var t = $(this).attr('id');


  if($(this).hasClass('inactive')){ 
    $('#tabs li a').addClass('inactive');           
    $(this).removeClass('inactive');
    
    $('.container').hide();
    $('#'+ t + 'C').fadeToggle('slow');
 }
});



});
	#tabs {

   width: 100%;
   height:30px; 
   border-bottom: solid 1px #CCC;
   padding-right: 2px;
   margin-top: 30px;
   

}
a {cursor:pointer;}

#tabs li {
    float:left; 
    list-style:none; 
    border-top:1px solid #ccc; 
    border-left:1px solid #ccc; 
    border-right:1px solid #ccc; 
    margin-right:5px; 
    border-top-left-radius:3px;  
    border-top-right-radius:3px;
      outline:none;
}

#tabs li a {

    font-family:Arial, Helvetica, sans-serif; 
    font-size: small;
    font-weight: bold; 
    color: #5685bc;;
   padding-top: 5px;
   padding-left: 7px;
   padding-right: 7px;
    padding-bottom: 8px; 
    display:block; 
    background: #FFF;
    border-top-left-radius:3px; 
    border-top-right-radius:3px; 
    text-decoration:none;
    outline:none;
  
}

#tabs li a.inactive{
    padding-top:5px;
    padding-bottom:8px;
  padding-left: 8px;
  padding-right: 8px;
    color:#666666;
    background: #EEE;
   outline:none;
   border-bottom: solid 1px #CCC;

}

#tabs li a:hover, #tabs li a.inactive:hover {


    color: #5685bc;
      outline:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="tabs">
                            <li><a id="tab1" class="btn ">1</a></li>
                            <li><a id="tab2" class="btn inactive">2</a></li>
                            <li><a id="tab3" class="btn  inactive">3</a></li>
                            <li><a id="tab4" class="btn  inactive">4</a></li>
                            <li><a id="tab5" class="btn  inactive">5</a></li>
                            <li><a id="tab6" class="btn  inactive">6</a></li>
                            <li><a id="tab7" class="btn  inactive">7</a></li>
                            <li><a id="tab8" class="btn  inactive">8</a></li>
                            </ul>

<div class="container" id="tab1C">
tab1
</div>
<div class="container" id="tab2C">
tab 2 data
</div>
<div class="container" id="tab3C">
tab 3 data
</div>

<div class="container" id="tab4C">
tab 4 data
</div>
<div class="container" id="tab4C">
tab 5 data
</div>
<div class="container" id="tab6C">
tab data
</div>
<div class="container" id="tab7C">
tab data
</div>
<div class="container" id="tab8C">
tab data
</div>

<p> so what i want is to show first four tab button and next and previous button , when I click on next button it show  next four tab  that is 5 6 7 8 <br>

When i click on previous it show previous four button from its position

I hope i explain well thanks for you cooperation </p>

, так что я хочу показать первую кнопку с четырьмя вкладками и следующую и предыдущую кнопки, когда я нажимаю на следующую кнопку, она показывает следующие четыре вкладки, которые 5 6 7 8 

When i click on previous it show previous four button from its position

I hope i explain well thanks for you cooperation
...