当前位置:首页 > 笔记 > 用HTML写的仿柠萌影视左侧分类列表

用HTML写的仿柠萌影视左侧分类列表

nyoung2年前 (2019-10-19)笔记4842

用HTML写的仿柠萌影视左侧分类列表

效果大概是这个样子的

QQ截图20191019130633.png

纯属娱乐   需要高版本的浏览器效果才好


<html>
<style>
.but{
background:#28282F;color:rgb(255,255,255);height:40px;text-align: center;line-height: 40px;width:200px;cursor:default
}
.but:hover{
background:#121720;cursor:default !important;
}
</style>
<body>
<script>
function setcolor(id)
{
var aDiv=getByClass("but");
for (var i = 0;i<aDiv.length;i++) {
aDiv[i].style="but";
}
document.getElementById(id).style.background='#121720';
}
function getByClass(name){
//如果浏览器支持 会得到一个函数体
if(document.getElementsByClassName){
return document.getElementsByClassName(name);
}
//把所有的元素获取到
var allItems = document.getElementsByTagName("*");
var newArr = [];
//查找每一个元素的className 看其中含不含name
for(var i = 0; i < allItems.length; i++){
var classNames = allItems[i].className;//"test test11"
var arrClass = classNames.split(" ");
for(var j = 0; j < arrClass.length; j++){
if(arrClass[j]==name){
newArr.push(allItems[i]);
}
}
}
return newArr;
}
</script>
<div>
<div class="but" id="cs1" onclick="setcolor('cs1')">动作片</div>
<div class="but" id="cs2" onclick="setcolor('cs2')">喜剧片</div>
<div class="but" id="cs3" onclick="setcolor('cs3')">爱情片</div>
<div class="but" id="cs4" onclick="setcolor('cs4')">科幻片</div>
<div class="but" id="cs5" onclick="setcolor('cs5')">恐怖片</div>
<div class="but" id="cs6" onclick="setcolor('cs6')">奇幻片</div>
</div>
</body>
</html>


评论列表

lianxi
7个月前 (02-14)

对我很有用多谢.

访客
访客
1年前 (2020-06-28)

柠檬影视无法访问网络QAQ

十三
十三
2年前 (2020-04-02)

你好,想问下,你的网站开源吗,我想借鉴你的网站,想要自己做一个网站但无从下手

访客 回复:
这是zblog博客系统 网上免费的 你可以百度一下
1年前 (2020-04-17)
访客
访客
2年前 (2019-10-25)

厉害

nyoung 回复:
哈哈
2年前 (2019-10-26)
访客 回复:
柠檬影视网络无法访问QAQ
1年前 (2020-06-28)
访客
访客
2年前 (2019-10-23)

这个是干嘛的

nyoung 回复:
做着玩的
2年前 (2019-10-26)

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。