如何在进行自定义分页时动态应用类？

Question

我在我的屏幕上有自定义分页。 现在的问题是，当我做我的分页

1. 我如何申请的activeclass上向前和向后移动使用分页。
2. 我如何申请activeclass当我点击数字。

我试过使用javascript，但由于页面上有许多相同的值，所以会产生冲突。另外如果我必须添加额外的li点击下一个像7之后的8，是否有可能在相同的功能？

请找我的工作代码为分页：

CSS：

/*Pagination CSS*/  

ul.pagination { 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
} 

ul.pagination li {display: inline;} 

ul.pagination li a { 
    color: black; 
    float: left; 
    padding: 8px 16px; 
    text-decoration: none; 
    transition: background-color .3s; 
    border: 1px solid #ddd; 
} 

ul.pagination li a.active { 
    background-color: #4CAF50; 
    color: white; 
    border: 1px solid #4CAF50; 
} 

ul.pagination li a:hover:not(.active) {background-color: #ddd;} 

div.center {text-align: center;} 

/*Pagination CSS Ends here*/ 

HTML：

<div class="center"> 
    <ul class="pagination"> 
    <li><a href="#">«</a></li> 
    <li><a id="test1" href="#">1</a></li> 
    <li><a id="test2" class="active" href="#">2</a></li> 
    <li><a href="#">3</a></li> 
    <li><a href="#">4</a></li> 
    <li><a href="#">5</a></li> 
    <li><a href="#">6</a></li> 
    <li><a href="#">7</a></li> 
    <li><a href="#" onclick="test()">»</a></li> 
    </ul> 
</div> 

的Javascript：

function test() { 
    alert($('#myForm').find("input[value='" + 1 + "']").attr('id')); 
    document.getElementById("test2").className = ""; 
    document.getElementById("test1").className = "active"; 
    alert("test1"); 
} 

Answer 1

我提供完整的示例，以防止为一个rrows（上一个，下一个）选择

$('ul.pagination').on('click', 'a', function() { // listen for click on pagination link 
 
    if($(this).hasClass('active')) return false; 
 
    
 
    var active_elm = $('ul.pagination a.active'); 
 
    
 
    if(this.id == 'next'){ 
 
     var _next = active_elm.parent().next().children('a'); 
 
     if($(_next).attr('id') == 'next') { 
 
     
 
     // appending next button if reach end 
 
     var num = parseInt($('a.active').text())+1; 
 
     active_elm.removeClass('active'); 
 
     $('<li><a class="active" href="#">'+num+'</a></li>').insertBefore($('#next').parent()); 
 
     return; 
 
     } 
 
     _next.addClass('active'); 
 
     
 
     
 
     
 
     
 
    } 
 
    else if(this.id == 'prev') { 
 
     var _prev = active_elm.parent().prev().children('a'); 
 
     if($(_prev).attr('id') == 'prev') return false; 
 
     _prev.addClass('active'); 
 
    } else { 
 
     $(this).addClass('active'); 
 
    } 
 
    active_elm.removeClass('active'); 
 
    
 
});

ul.pagination { 
 
    display: inline-block; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
ul.pagination li {display: inline;} 
 

 
ul.pagination li a { 
 
    color: black; 
 
    float: left; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
    transition: background-color .3s; 
 
    border: 1px solid #ddd; 
 
} 
 

 
ul.pagination li a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    border: 1px solid #4CAF50; 
 
} 
 

 
ul.pagination li a:hover:not(.active) {background-color: #ddd;} 
 

 
div.center {text-align: center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="center"> 
 
    <ul class="pagination"> 
 
    <li><a id="prev">«</a></li> 
 
    <li><a id="test1" href="#">1</a></li> 
 
    <li><a id="test2" class="active" href="#">2</a></li> 
 
    <li><a href="#">3</a></li> 
 
    <li><a href="#">4</a></li> 
 
    <li><a href="#">5</a></li> 
 
    <li><a href="#">6</a></li> 
 
    <li><a href="#">7</a></li> 
 
    <li><a href="#" id="next">»</a></li> 
 
    </ul> 
 
</div>

Answer 2

$('ul.pagination li a').on('click', function() { 
 
    var $this = $(this), 
 
     $active = $('ul.pagination li a.active'),  
 
     $elem; 
 

 
    if ($this.is($active)) { 
 
    return; 
 
    } 
 

 
    switch ($this.attr('id')) { 
 
    case 'prev': 
 
     $elem = $active.parent().prev().children('a'); 
 
     if ($this.is($elem)) { 
 
     return; 
 
     } 
 
     $elem.addClass('active'); 
 
     break; 
 

 
    case 'next': 
 
     $elem = $active.parent().next().children('a'); 
 
     if ($this.is($elem)) { 
 
     return; 
 
     } 
 
     $elem.addClass('active'); 
 
     break; 
 

 
    default: 
 
     $this.addClass('active'); 
 
     break; 
 
    } 
 

 
    $active.removeClass('active'); 
 
});

/*Pagination CSS*/  
 

 
ul.pagination { 
 
    display: inline-block; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
ul.pagination li {display: inline;} 
 

 
ul.pagination li a { 
 
    color: black; 
 
    float: left; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
    transition: background-color .3s; 
 
    border: 1px solid #ddd; 
 
} 
 

 
ul.pagination li a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    border: 1px solid #4CAF50; 
 
} 
 

 
ul.pagination li a:hover:not(.active) {background-color: #ddd;} 
 

 
div.center {text-align: center;} 
 

 
/*Pagination CSS Ends here*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="center"> 
 
    <ul class="pagination"> 
 
    <li><a href="#" id="prev">«</a></li> 
 
    <li><a href="#">1</a></li> 
 
    <li><a class="active" href="#">2</a></li> 
 
    <li><a href="#">3</a></li> 
 
    <li><a href="#">4</a></li> 
 
    <li><a href="#">5</a></li> 
 
    <li><a href="#">6</a></li> 
 
    <li><a href="#">7</a></li> 
 
    <li><a href="#"id="next">»</a></li> 
 
    </ul> 
 
</div>

Answer 3

首先是给予积极班李和变化的CSS应用下面的a标签样式li带类活跃

关于测试函数写这个：

var index = $(".pagination > li.active").index(); 
$(".pagination > li.active").removeClass("active") 
$(".pagination > li").eq(index-1).addClass("active") 

，当你点击分页特殊项目做到这一点：

$(".pagination > li").on("click",function(){ 
     $(".pagination > li.active").removeClass("active"); 
     $(this).addClass("active"); 
}) 

Answer 4

首先，我会建议在test功能会通知下一首/上一个参数。然后，您应搜索current element，然后向相应的方向移动。

我也添加了处理选择任何页面。

$('.pagination li').on('click', function() { 
 
    var $this = $(this) 
 
    if ($this.data('action')) { 
 
    $this.removeClass('active'); 
 
    if (index > 0) { 
 
     $this.closest('li').next().find('a').addClass('active'); 
 
    } else { 
 
     $this.closest('li').prev().find('a').addClass('active'); 
 
    } 
 
    } else { 
 
    $('.pagination li a').removeClass('active'); 
 
    $this.find('a').addClass('active') 
 
    } 
 
})

ul.pagination { 
 
    display: inline-block; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
ul.pagination li { 
 
    display: inline; 
 
} 
 
ul.pagination li a { 
 
    color: black; 
 
    float: left; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
    transition: background-color .3s; 
 
    border: 1px solid #ddd; 
 
} 
 
ul.pagination li a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    border: 1px solid #4CAF50; 
 
} 
 
ul.pagination li a:hover:not(.active) { 
 
    background-color: #ddd; 
 
} 
 
div.center { 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="center"> 
 
    <ul class="pagination"> 
 
    <li><a href="#" onclick='test(-1)'>«</a> 
 
    </li> 
 
    <li><a href="#">1</a> 
 
    </li> 
 
    <li><a class="active" href="#">2</a> 
 
    </li> 
 
    <li><a href="#">3</a> 
 
    </li> 
 
    <li><a href="#">4</a> 
 
    </li> 
 
    <li><a href="#">5</a> 
 
    </li> 
 
    <li><a href="#">6</a> 
 
    </li> 
 
    <li><a href="#">7</a> 
 
    </li> 
 
    <li><a href="#" onclick="test(1)">»</a> 
 
    </li> 
 
    </ul> 
 
</div>