                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript入门篇

谁能帮我看一下，怎么解决，怎么实现分页效果呢？现在做了一半，

<!DOCTYPE html>

<html>

<head>

*{padding: 0;margin: 0;}

ul li{width: 30px;height: 30px;line-height: 30px;text-align: center;border: 1px solid #ccc;float: left;

margin-right: 0.5em;list-style: none;cursor: pointer;}

ul li:first-child,li:last-child{border: none;padding-right: .5em;}

.active{background: #555;color: #fff;}

li:first-child::before{content: "\00AB";margin-right: .3em;}

li:last-child::after{content: "\00BB";margin-left: .3em;}

</style>

</head>

<body>

<ul>

</ul>

window.onload=function(){

var li=document.getElementsByTagName('li');

var before=document.getElementsByClassName('active');

for(var i=1;i<li.length-1;i++){

li[i].onclick=function(){

this.className='active';

// before.className='';

}

</script>

</body>

</html>

懒姑娘要学习了

2017-12-08

源自：JavaScript入门篇 3-6

关注问题我要回答

1438

操作

收起

3 回答

lglong519 回答被采纳 +2 积分
2017-12-10

<script type="text/javascript">
            window.onload=function(){
                var li=document.getElementsByTagName('li');
                var before=document.getElementsByClassName('active');
                for(var i=0;i<li.length;i++){
                    //闭包获取当前i
                   (function(i) {
                       li[i].onclick=function(){
                        //如果是数字按钮则切换,将当前按钮class设置为active
                        if(i>0&&i<li.length-1){
                            if(this.className.indexOf('active')==-1){
                                before[0].className='';
                                this.className='active';
                            }
                            //如果不是数字按钮,先获得active标签的下标,然后根据左右按钮的点击设置对应位置的按钮为active
                        }else{
                            for(var n=1;n<li.length-1;n++){
                                if(li[n].className.indexOf('active')>-1){
                                    break;
                                }
                            }
                            //如果是左按钮
                            if(i==0&&n!=1){
                                before[0].className='';
                                li[--n].className='active';
                            //如果是右按钮
                            }else if(i==li.length-1&&n!=li.length-2){
                                before[0].className='';
                                li[++n].className='active';
                            }
                        }
                    }
                   })(i);
                    
                }
            }
        </script>

按钮的切换可以,具体内容也可以根据i或n切换一

1 回复有任何疑惑可以回复我~

收起回答

懒姑娘要学习了提问者

非常感谢！

2017-12-11 回复有任何疑惑可以回复我~

懒姑娘要学习了提问者
2017-12-08

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			ul li{width: 30px;height: 30px;line-height: 30px;text-align: center;border: 1px solid #ccc;float: left;
				margin-right: 0.5em;list-style: none;cursor: pointer;}
			ul li:first-child,li:last-child{border: none;padding-right: .5em;}
			.active{background: #555;color: #fff;}
			li:first-child::before{content: "\00AB";margin-right: .3em;}
			li:last-child::after{content: "\00BB";margin-left: .3em;}
			
		</style>
	</head>
	<body>
		<ul>
			<li>pre</li>
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>next</li>	
		</ul>
		<script type="text/javascript">
			window.onload=function(){
				var li=document.getElementsByTagName('li');
				var before=document.getElementsByClassName('active');
				for(var i=1;i<li.length-1;i++){
					li[i].onclick=function(){
						this.className='active';
//						before.className='';
					}
				}
			}
		</script>
	</body>
</html>

0 回复有任何疑惑可以回复我~

收起回答