php当前页码颜色加深,当前页码高亮显示—第五期0419作业

实例

html>

电影分类

/*设置表格样式*/

table

{

/*折叠表格线与单元格之间的间隙*/

border-collapse:collapse;

width: 90%;

}

/*设置表格与单元格边框*/

table,th, td

{

border: 1px solid black;

text-align: center;

}

/*设置标题行背景色*/

table thead tr:first-of-type {

background-color: lightblue;

}

/*设置每一列的宽度*/

table tbody tr td:nth-of-type(1) {

width: 10%;

}

table tbody tr td:nth-of-type(2){

width: 20%;

}

table tbody tr td:nth-of-type(3) {

width: 70%;

}

/*设置分页条样式*/

ul {

text-align: center;

}

ul li {

/*去掉默认样式*/

list-style-type: none;

/*转为水平显示*/

display: inline-block;

width: 30px;

height: 20px;

border: 1px solid black;

/*垂直水平居中*/

text-align: center;

line-height: 20px;

cursor: pointer;

margin-left: 5px;

}

ul li:hover {

background-color: lightblue;

border: 1px solid red;

}

/*作业: 如何设置当前页码的高亮?*/

.active {

background-color: lightblue;

border: 1px solid red;

}

序号片名简介

// 1.创建Ajax对象

var ajax = new XMLHttpRequest();

// 2.监听请求

ajax.onreadystatechange = function (ev) {

// 请求成功

if(ajax.readyState === 4){

var date = JSON.parse(ajax.responseText);

var oUl = document.getElementsByTagName('ul')[0];

console.log(date);

for(var i=0;i

var oLi = document.createElement('li');

//给oLi添加点击事件

oLi.onclick = function () {

var search = location.search.slice(0,6) + this.innerText;

location.replace(search);    //替换当前请求

};

oLi.innerHTML = i + 1;

oUl.appendChild(oLi);

}

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

var index = location.search.slice(6);

for(var i = 0;i

oLis[i].className = '';

if(oLis[i].innerText === index){

oLis[i].className = 'active'

}

}

date[1].forEach(function (value) {

// console.log(value);

var oTr = document.createElement('tr');

for (key in value){

var oTd = document.createElement('td');

oTd.innerHTML = value[key];

oTr.appendChild(oTd);

}

var oTbody = document.getElementsByTagName('tbody')[0];

oTbody.appendChild(oTr);

})

}

};

// 3.发送请求

ajax.open('GET', 'get_movies.php?page==$_GET["page"] ?:1?>', true);

ajax.send(null);

运行实例 »

点击 "运行实例" 按钮查看在线实例