如何在进行自定义分页时动态应用类
How to apply class dynamically while doing custom pagination?
我的屏幕上有一个自定义分页。现在的问题是,当我做分页
- 我如何应用
active
class
使用分页向前和向后移动。 - 当我点击数字时如何应用
active
class
。
我尝试使用javascript,但它会产生冲突,因为页面上有许多相同的值。此外,如果我必须添加额外的li
点击下一个像8后7,是否有可能做到这一点在同一功能?
请找到我的工作代码分页:
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");
}
我提供了一个完整的例子,防止箭头(prev, next)选择
$('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>
$('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>
首先给li添加一个active class,然后改变css样式,在li下面的a
标签上应用active class
在test函数中这样写:
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");
})
首先,我建议在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>
相关文章:
- 如何在angular.js中动态应用自定义过滤器
- 将jquery函数动态应用于添加的元素
- RequireJS:将插件动态应用于模块id
- 在同一页面上的多个搜索框上动态应用 Jquery 中的搜索过滤器
- 将 CSS 样式动态应用于特定元素
- 使用 JavaScript 动态应用 CSS
- 使用 css 类和正则表达式将样式动态应用于文本的各个部分
- 如何动态应用 base64 编码的数据 uri
- 如何在phonegap android中动态应用id表单
- 动态应用引导手风琴功能
- CSS有效,但不动态应用
- 如何在进行自定义分页时动态应用类
- 动态应用css样式
- 如何使框架调整器动态应用minHeight值
- jQuery UI布局-如何更改窗格's选项,并在不切换打开/关闭窗格的情况下动态应用它们
- IE8不动态应用css显示
- 关闭动态应用程序的所有子弹出窗口
- 在slick.js滑块中动态应用Javascript到视频
- 使用javascript动态应用数据绑定
- 将属性动态应用于指令中ngRepeat中的DOM元素