                        課程
                    
                        /前端開發
                        
                            /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

關注問題我要回答

1478

操作

收起

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 回復有任何疑惑可以回復我~

收起回答