2、开关灯、选项卡、隔行换色

一、

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>html,body{margin: 0;padding: 0;width: 100%;height: 100%;cursor: pointer;}</style></head>
<body id="bod" style="background-color:white;"><script type="text/javascript">var obod=document.getElementById("bod");//第一种：if elseobod.οnclick=function(){var obody=obod.style.backgroundColor;console.log(obody);//为什么输出不了---因为绑定了点击事件，需要点击body才会显示if(obody==="white"){obod.style.backgroundColor="black";}else if(obody==="black"){obod.style.backgroundColor="red";}else if(obody==="red"){obod.style.backgroundColor="pink";}else{obod.style.backgroundColor="white";}};//第二种：switch case
//    obod.οnclick=function(){
//        var obody=this.style.backgroundColor;
//        switch(obody){
//            case "white":
//                this.style.backgroundColor="black";
//                break;
//            case "black":
//                this.style.backgroundColor="red";
//                break;
//            case "red":
//                this.style.backgroundColor="pink";
//                break;
//            default:
//                this.style.backgroundColor="white"
//        };
//    };</script>
</body>
</html>

二、选项卡

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;font-family: arial, "微软雅黑";font-size: 14px;}ul,li{list-style: none;}#tab{margin: 30px auto;width: 500px;}#tab ul{position: relative;top: 1px;z-index: 100;}#tab ul li{width: 100px;height: 30px;line-height: 30px;text-align: center;border: 1px solid #ddd;margin-right: 10px;float: left;cursor: pointer;}#tab ul li.select{/*选中样式？？？类名？？ 么有空格*/background: -webkit-linear-gradient(top left,red,orange,yellow,green,blue,purple);border-bottom:none ;}#tab div{border: 1px solid #ddd;height: 100px;line-height: 100px;text-align: center;clear: both;/*清除浮动，子级浮动对叔叔级元素造成影响，直接给叔叔级元素添加clear：both*/display: none;}#tab div.select{display: block;}.list1{background: red;}</style>
</head>
<body>
第一步：分析需求思路
1、写出默认选中显示样式.select{}， 显示第一个li 与第一个div
2、鼠标经过某一个li时，让当前li和对应的div 有select的样式而其余的没有这个样式即可（鼠标经过某个li，先让所有的li和div都没有select样式，再让当前li及对应的div有select的样式即可）
第二步：要操作谁就先获取谁
第三步：制定一个功能方法（函数），实现需求
第四部：给li绑定鼠标事件，运行函数
<div id="tab"><ul><li class="select">视频</li><li class="list1">综艺</li><li>秒拍</li></ul><div class="select">视频内容</div><div>综艺内容</div><div>秒拍内容</div>
</div>
<script type="text/javascript">var oli=document.getElementById("tab").getElementsByTagName("li");//获取一组livar odiv=document.getElementById("tab").getElementsByTagName("div");//获取一组div
function tabChange(n){// n 形参 没有执行函数的时候，他就是个参数，for (var i=0;i<oli.length;i++){oli[i].className="";odiv[i].className="";// 令循环中的每一个li和div都没有了className// 会影响到其他效果.list的红色背景？？？？？？更好的定义方式？
            };oli[n].className="select";odiv[n].className="select";//运行函数时才会实现 所有className为空 和 当前元素的select样式的显示
    };for(var i=0;i<oli.length;i++){oli[i].index=i;//在每一次循环的时候，将每一个li的索引存储给indexoli[i].οnmοuseοver=function(){tabChange(this.index);//执行函数 （）内的形参就代表该元素的索引
        };};
// 绑定事件 运行函数
</script>
</body>
</html>

三、隔行换色

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}ul{list-style: none;border: 1px solid #dddcdb;margin: 50px auto;width: 500px;/*background: -webkit-linear-gradient(top left,#b3131a,#ad198b,#0000cc);*/}li{height: 30px;line-height: 30px;}.bg0{background: #eeebee;}.bg1{background: red;}.bg2{background: blue;}.bg3{background: pink;}</style>
</head>
<body>
<div><ul id="ull"><li>我要隔行变色我要隔行变色</li><li>我要隔行变色我要隔行变色</li><li>我要隔行变色我要隔行变色</li><li>我要隔行变色我要隔行变色</li><li>我要隔行变色我要隔行变色</li><li>我要隔行变色我要隔行变色</li><li>我要隔行变色我要隔行变色</li><li>我要隔行变色我要隔行变色</li><li>我要隔行变色我要隔行变色</li><li>我要隔行变色我要隔行变色</li></ul>
</div>
<script type="text/javascript">var oull=document.getElementById("ull");var oli=oull.getElementsByTagName("li");
//第一种：
//    for (var i=0;i<oli.length;i++){
//        var ol=oli[i];
//        //获取循环中的每个li
//        if(i%2===0){
//           ol.className="bg0";
//            ol.oldName="bg0";
//        }else{
//            ol.className="bg1";
//            ol.oldName="bg1";
//        }
//        ol.οnmοuseοver=function(){
//            this.className="bg2"
//        };
//        ol.οnmοuseοut=function(){
//            this.className=this.oldName;
//        };
//    };//分别添加新的属性储存鼠标经过前的值
//第二种：
//    for(var i=0;i<oli.length;i++){
//        (i%2===0)?(oli[i].className="bg0",oli[i].oldName="bg0"):(oli[i].className="bg1",oli[i].oldName="bg1");
//
//        oli[i].οnmοuseοver=function(){
//            this.className="bg3"
//        };
//        oli[i].οnmοuseοut=function(){
//            this.className=this.oldName
//        };
//    };//三元运算符  自定义添加属性////第三种：switch case      (隔两行变色)
//    for(var i=0;i<oli.length;i++){
//        switch (i%3){
//            case 0:
//                oli[i].className="bg0";
//                    oli[i].oldName="bg0";
//                break;
//            case 1:
//                oli[i].className="bg1";
//                oli[i].oldName="bg1";
//                break;
//            default:
//                oli[i].className="bg2";
//                oli[i].oldName="bg2";
//        };
//        oli[i].οnmοuseοver=function(){
//            this.className="bg3"
//        };
//        oli[i].οnmοuseοut=function(){
//            this.className=this.oldName
//        };
//    }//第四种：for(var i=0;i<oli.length;i++){oli[i].className="bg"+i%2+"";//拼接字符串
oli[i].oldName="bg"+i%2+"";   //自定义变量oli[i].οnmοuseοver=function(){this.className="bg2"};oli[i].onmouseout=function(){this.className=this.oldName;};};// 拼接字符串 自定义变量// if else
//    for(var i=0;i<oli.length;i++){
//       var oll=oli[i];
////        每一次循环的时候获取oli
//        if(i%2===0){
//               oll.className="bg1";
//        }else{
//            oll.className="bg2";
//        }
//    }//三元运算符
//    for (var i=0;i<oli.length;i++){
//        var oll=oli[i];
//        (i%2===0)?(oll.className="bg1"):(oll.className="bg2");
//    }
// switch case 隔三行变色
</script>
</body>
</html>

转载于:https://www.cnblogs.com/dalyn/p/7270727.html

2、开关灯、选项卡、隔行换色相关推荐

AJAX实现页面选项卡、隔行换色、弹出层功能代码
代码简介:AJAX实现页面选项卡.隔行换色.弹出层功能代码代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
SSRS 2012 聚合函数 -- 隔行换色示例
SSRS 2012 聚合函数 -- 隔行换色示例有时我们希望报表能够显示出数据笔数的流水序号,如果要使用T-SQL查询来做出这种效果,通常必须使用RANK函数以自动产生编号,在此将介绍如何使用SSR ...
在PHP当中制作隔行换色的效果以及制作上下翻页的效果！
首先说明隔行换色的效果,需要用到tr:nth_child(odd);或者括号里的值是even,odd是从第一行开始隔一行,even是从第二行开始: 具体代码如下图案所示: 1 <style> ...
ListView数据项隔行换色控制实现详解
看到有朋友在群里问过ListView项达到一定数量时加不同色选项的功能,有时间就学习了下ListView隔行换色的效果,大体效果实现出来了,吼吼,写博客里面,跟大家学习交流,一样的,先贴效果,再上代码 ...
java css隔行变色_JS+CSS实现Li列表隔行换色效果的方法
本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法.分享给大家供大家参考.具体实现方法如下: CSS+Js实现Li列表隔行换色效果 .mytable {border-collapse:colla ...
骂骂咧咧的 fastreport 数据隔行换色
1, 我要吐槽的是, 这破玩意怎么现在还有人在用??? md, 找个文档要找老半天, 还没有, 社区也没有, 还得自己猜 2, 先看数据格式 2.1 数据格式 dataList, 就是我们的数据表, ...
jquery 表格（鼠标悬停改变改变行背景+隔行换色）
NUM1:鼠标悬停改变改变行背景: NUM2:隔行换色: HTML: <table border="1"><thead><tr><th&g ...
IE8 chrome 中 table隔行换色解决办法
今天把项目生成好后,发布到万维网上进行测试,发现table的隔行换色在IE8,chorem中不能正常显示.找了许多资料,CSS看样是不能解决,只能用JS来控制了 IE8以上的版本代码,只需要CSS即可 ...
隔行换色案例||全选和全不选||QQ表情选择||多选下拉列表左右移动
01.隔行换色.html <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
【前端3】jquary：页面加载，选择器，隔行换色，Dom，全选，动画，遍历，广告/抽奖，表单校验插件
文章目录 1.jquery框架引入:$("mydiv") 当成id选择器 2.jquery版本/对象:$(js对象) -> jquery对象 3.jquery的页面加载事件: ...

2、开关灯、选项卡、隔行换色

2、开关灯、选项卡、隔行换色相关推荐

最新文章

热门文章