Jquery导航悬停点击及首页图片切换功能

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="wzgyd.WebForm3" %>

<!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 runat="server">
    <title>无标题页</title>
    <style type="text/css">
        .divlest
        {
            width: 146px;
            height: 50px;
            float: left;
            border-color: Black;
            border-left-style: solid;
            border-width: 1px;
            text-align: center;
            line-height: 50px;
            font-weight: bold;
            color: White;
        }
        .fj
        {
            text-align: center;
            width: 39px;
            float:right;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0;
            height: 116px;
        }
        a
        {
            text-decoration: none;
            color: White;
        }
    </style>

$(function(){
var number=0;

//>同于子级（children）
$(".fj>input").click(function(){

//获得input标签的索引值赋值给number变量
number=$(this).index();

//switch判断是否符合条件，执行背景DIV样式的切换
      switch(number){
      case 0:
         $("#upcolor").css("background-color","White");
         break;
        case 1:
          $("#upcolor").css("background-color","red");
          break;
      case 2:
       $("#upcolor").css("background-color","Black");
       break;
       case 3:
       $("#upcolor").css("background-color","blue");
       break;
       case 4:
          $("#upcolor").css("background-color","lime");
       break;
       case 5:
           $("#upcolor").css("background-color","aqua");
           break;
      }
    });



     var x_inx=0;
     $(".divlest").click(function(){
      x_inx=$(this).index();//获得当前点击的值
     $(".divlest").css("background-color","#8f5e23");//给所有Div按钮变换为初始样式
     $(this).css("background-color","#724a1a");//给当前点击DIV按钮变换样式
     });
     //mouseover鼠标悬停事件
     //mouseout鼠标移出事件
     $(".divlest").mouseover(function(){
      $(this).css("background-color","#724a1a");
     }).mouseout(function(){
      var x=$(this).index();
      //判断鼠标移出div的值是否和鼠标单击的值不一致

      if(x!=x_inx)
      {
      //不一致更改背景颜色
         $(this).css("background-color","#8f5e23");
      }
     })
    });



    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div style="height: 769px; width:100%; text-align:center;">
    <div style=" width:100%; height:50px; text-align:center; margin:0 auto;">
      <div class="divlest" style="margin-left:100px;"><a href="#">首页</a></div>
      <div class="divlest" ><a href="#">品牌</a></div>
       <div class="divlest"><a href="#">腕表</a></div>
        <div class="divlest"><a href="#">箱包</a></div>
         <div class="divlest"><a href="#">我要寄卖</a></div>
          <div class="divlest"><a href="#">名品养护</a></div>
      <div class="divlest" style=" border-right-style:solid;"><a href="#">金融兑现</a></div>
    </div>
    <div style="height: 451px; text-align:center; margin-top:10px; margin-left: auto; margin-right: auto; margin-bottom: 0;">
     <div id="upcolor" style="height: 392px; ">


    <div class="fj">
       <input type="radio" name="an" id="1" checked="checked" value="1" />
       <input type="radio" name="an" id="2" value="2" />
       <input type="radio" name="an" id="3" value="3" />
       <input type="radio" name="an" id="4" value="4" />
       <input type="radio" name="an" id="5" value="5" />
        </div>


     </div>

    </div>


    </div>
    </form>
</body>
</html>

秒客网

Jquery导航悬停点击及首页图片切换功能

相关文章