4.9 am例题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
            *{
                margin:0px auto;}
            #kuang{
                100px;
                height:50px;}
            .list{
                100px;
                height:50px;
                background-color:#03C;
                text-align:center;
                vertical-align:middle;
                line-height:50px;
                color:#fff;
                border:1px solid #CCC}    
            
        </style>
    </head>
    
    <body>
        <div id="kuang">
            <div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui()">深圳</div>
            <div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui()">北京</div>
            <div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui()">上海</div>
        </div>
        
       <!--    <div id="l" style="100%; height:200px; background-color:red;"></div>
        <div id="caidan" style="100%; height:100px; background-color:blue;"></div>
        <div style="100%; height:1000px; background-color:#000;"></div>
        <input type="button" value="an" onclick="Hui()" />-->
        
    </body>
    <script type="text/javascript">
        function Xuan(a)
        {
            var list = document.getElementsByClassName("list");
            //清一下(回复原样式)
            for(var i=0;i<list.length;i++)
            {
                list[i].style.backgroundColor = "#03C";    
                list[i].removeAttribute("as");
            }
            //选择变色
            a.style.backgroundColor = "red";
            a.setAttribute("as",1);    
        }
        function Bian(a)
        {
            var list = document.getElementsByClassName("list");
            //清一下(回复原样式)
            for(var i=0;i<list.length;i++)
            {
                if(list[i].getAttribute("as")!=1)
                {
                    list[i].style.backgroundColor = "#03C";        
                }
                
            }
            //选择变色
            a.style.backgroundColor = "red";        
        }
        function Hui()
        {
            var list = document.getElementsByClassName("list");
            //清一下(回复原样式)
            for(var i=0;i<list.length;i++)
            {
                if(list[i].getAttribute("as")!=1)
                {
                    list[i].style.backgroundColor = "#03C";        
                }
                
            }    
        }
        
        /*function Hui()
        {
            window.scrollTo(0,200);    
        }*/
        
        /*window.onscroll = function()
        {
            var c = document.getElementById("caidan");    
            //var ch = c.style.height;
            var l = document.getElementById("l");    
            var lh = l.style.height;
            //parseInt(ch);
            if(window.scrollY >= parseInt(lh))
            {
                //超出的范围操作    
                c.style.position = "fixed";
                c.style.top = "0px";
            }
            else
            {
                //没有超出的范围操作
                c.style.position = "relative";
            }*/
        }
    </script>
</html>

这是这个例题的最终效果，鼠标移上可以变色，移开在变回来，点击可以选中而且变色。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无标题文档</title>
  <style type="text/css">
  *{
  margin:0px auto;}
  #kuang{
  100px;
  height:50px;}
  .list{
  100px;
  height:50px;
  background-color:#03C;
  text-align:center;
  vertical-align:middle;
  line-height:50px;
  color:#fff;
  border:1px solid #CCC}
   
  </style>
  </head>
   
  <body>
  <div id="kuang">
  <div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui()">深圳</div>
  <div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui()">北京</div>
  <div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui()">上海</div>
  </div>
   
  <!-- <div id="l" style="100%; height:200px; background-color:red;"></div>
  <div id="caidan" style="100%; height:100px; background-color:blue;"></div>
  <div style="100%; height:1000px; background-color:#000;"></div>
  <input type="button" value="an" onclick="Hui()" />-->
   
  </body>
  <script type="text/javascript">
  function Xuan(a)
  {
  var list = document.getElementsByClassName("list");
  //清一下(回复原样式)
  for(var i=0;i<list.length;i++)
  {
  list[i].style.backgroundColor = "#03C";
  list[i].removeAttribute("as");
  }
  //选择变色
  a.style.backgroundColor = "red";
  a.setAttribute("as",1);
  }
  function Bian(a)
  {
  var list = document.getElementsByClassName("list");
  //清一下(回复原样式)
  for(var i=0;i<list.length;i++)
  {
  if(list[i].getAttribute("as")!=1)
  {
  list[i].style.backgroundColor = "#03C";
  }
   
  }
  //选择变色
  a.style.backgroundColor = "red";
  }
  function Hui()
  {
  var list = document.getElementsByClassName("list");
  //清一下(回复原样式)
  for(var i=0;i<list.length;i++)
  {
  if(list[i].getAttribute("as")!=1)
  {
  list[i].style.backgroundColor = "#03C";
  }
   
  }
  }
   
  /*function Hui()
  {
  window.scrollTo(0,200);
  }*/
   
  /*window.onscroll = function()
  {
  var c = document.getElementById("caidan");
  //var ch = c.style.height;
  var l = document.getElementById("l");
  var lh = l.style.height;
  //parseInt(ch);
  if(window.scrollY >= parseInt(lh))
  {
  //超出的范围操作
  c.style.position = "fixed";
  c.style.top = "0px";
  }
  else
  {
  //没有超出的范围操作
  c.style.position = "relative";
  }*/
  }
  </script>
  </html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/F9801/p/8845840.html