<%@ 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>

<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">

$(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导航悬停点击及首页图片切换功能的更多相关文章

  1. jquery 实现的一款超简单的图片切换功能

    <html><head> <meta http-equiv="Content-Type" content="text/html; chars ...

  2. jquery——左右按钮点击切换一组图片功能

    一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...

  3. 30款jQuery常用网页焦点图banner图片切换 下载

    1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片 ...

  4. 30款jQuery常用网页焦点图banner图片切换 下载 (转)

    1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片 ...

  5. JQuery弹出层,实现弹层切换,可显示可隐藏。

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  6. 一款基于jquery的下拉点击改变背景图片

    今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览   源码下载 实现的代码. html代码: <a ...

  7. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

  8. Smint – 用于单页网站制作的 jQuery 导航菜单插件

    Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...

  9. 炫酷实用的jQuery插件 涵盖菜单、按钮、图片

    新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...

随机推荐

  1. (翻译)《Hands-on Node.js》—— Introduction

    今天开始会和大熊君{{bb}}一起着手翻译node的系列外文书籍,大熊负责翻译<Node.js IN ACTION>一书,而我暂时负责翻译这本<Hands-on Node.js> ...

  2. js实用篇之String对象

    概述 String对象是JavaScript原生提供的三个包装对象之一,用来生成字符串的包装对象. var s1 = 'abc'; var s2 = new String('abc'); typeof ...

  3. AOJ DSL_2_D Range Update Query (RUQ)

    Range Update Query 数列 A = {a0,a1 ,...,an−1} に対し.次の2つの操作を行うプログラムを作成せよ. update(s,t,x): as,as+1,...,at  ...

  4. sql语句修改列

    1.修改列名的常用语句 exec sp_rename '[dbo].[Table_1].[birthday]','birth'  --将表中列名为birthday改为birdh 属性不变,用的是数据库 ...

  5. windows7下启动mysql服务出现服务名无效

    出现提示: WIN 7 cmd命令行下,net start mysql,出现 服务名无效提示: 问题原因: mysql服务没有安装. 解决办法: 在 mysql bin目录下 以管理员的权限 执行 m ...

  6. Jenkins邮件配置,实现邮件发送策略(可实现每个Job对应不同的发送邮箱)

    前言: 首先,要有一个用来发送的邮箱,首选网易!参考:http://www.cnblogs.com/EasonJim/p/6051636.html,这里我注册了网易的免费企业邮箱. 并且我新建没多个邮 ...

  7. php面向对象中static静态属性和静态方法的调用

    这篇文章主要介绍了php面向对象中static静态属性和静态方法的调用,实例分析了static静态属性和静态方法的原理与调用技巧,需要的朋友可以参考下 本文实例讲述了php中static静态属性和静态 ...

  8. mysql 总结二(自定义存储过程)

    mysql执行流程: sql命令--->mysql引擎-----(分析)---->语法正确-----(编译)--->可识别命令----(执行)---->执行结果---(返回)- ...

  9. 常用eclipse 快捷键

    Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当 ...

  10. javascript generate a guid

    function Guid() { var random = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); retu ...