素材图片

源码：

<!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;
            padding:0px;
            font-size:12px;
        }
        #bodyDiv{
            position:relative;
            background:#FFF url("images/bg1.jpg") no-repeat;
            width:1016px;
            height:1176px;
            margin:0 auto;
        }

        .search{
            position:absolute;
            left:125px;
            top:258px;
            height:24px;
            line-height:24px;
            width:325px;
            color:#999;
        }

        .tab{
            position:absolute;
            left:276px;
            top:397px;

        }
        #tab_bg{
            width: 700px;
            height: 36px;
            line-height: 36px;
            cursor: pointer;
        }
        .tab_bg0 {
            background: url(images/news_bghover.gif) 0px 0px;

        }
        .tab_bg1 {

            background: url(images/news_bghover.gif) 0px -36px;

        }
        .tab_bg2 {

            background: url(images/news_bghover.gif) 0px -72px;

        }
        .tab_bg3 {

            background: url(images/news_bghover.gif) 0px -108px;

        }
        .tab_bg4 {

            background: url(images/news_bghover.gif) 0px -144px;

        }
        a{
            color:#000;
            text-decoration:none;
        }
        .tab_common {
            width: 140px;
            height: 36px;
            line-height: 36px;
            float: left;
            text-align: left;
            cursor: pointer;
            text-indent: 40px;
        }

        .tab_current {
            width: 140px;
            height: 36px;
            line-height: 36px;
            float: left;
            text-align: left;
            cursor: pointer;
            color: #ffffff;
            text-indent: 40px;
        }
        .tab_current a{color:#fff;}

        .jiejue2{
            position:absolute;
            left:817px;
            top:750px;
        }
        /*nav*/
        #nav{
            position:absolute;
            top:366px;
            left:26px;
        }
        #nav ul{
            list-style:none;
        }
        #nav ul li{
            display:block;
            width:196px;
            line-height:30px;
            border-bottom:1px solid #999;
        }
        #nav ul li div.first{
            text-indent:20px;
            border-bottom:1px solid #999;
        }
        #nav ul.second{
            display:none;
        }

        #nav ul.second li{
            display:block;
            width:166px;
            padding-left:30px;
            height:30px;
            line-height:30px;
            border:none;
        }

    </style>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>
       $(function () {
           $(".first").click(function () {
               $(".second").show();
               $(this).next().hide();
           })
           $("#tab_bg >div").mouseover(function () {
               $(this).siblings("div").attr("class","tab_common");
               $(this).attr("class","tab_current");
               $(this).parent().attr("class",'tab_bg'+$(this).index());
           })
           //下面的代码同样可以实现改变样式
//            $(".tab_current,.tab_common").mouseover(function () {
//            var v=$(this).children("a").text();
//                switch (v){
//                    case "1.新用户注册":
//                        $(this).parent().attr('class',"tab_bg0");
//                        break;
//                    case "2.挑选商品":
//                        $(this).parent().attr('class',"tab_bg1");
//                        break;
//                    case "3.确认下单":
//                        $(this).parent().attr('class',"tab_bg2");
//                        break;
//                    case "4.订单跟踪":
//                        $(this).parent().attr('class',"tab_bg3");
//                        break;
//                    case "5.验货签收":
//                        $(this).parent().attr('class',"tab_bg4");
//                        break;
//                }
//            })
           $("input[name='IsAvail']").click(function () {
               if($(this).val()==0){
                   $(".wenti").show();
               }else{
                   $(".wenti").hide();
               }
           })

       })
    </script>
</head>
<body>
<div id="bodyDiv">
    <!-- 输入框 -->
    <input type="text" value="请输入要查询的问题"  name='search'  class='search'/>
    <!-- 左边导航 -->
    <div id='nav'>
        <ul>
            <li>
                <div class='first'>账号管理</div>
                <ul class='second'>
                    <li>账号注册</li>
                    <li>找回密码</li>
                    <li>账户关联登录</li>
                    <li>账号常见问题</li>
                </ul>
            </li>
            <li>
                <div class='first'>购物指南</div>
                <ul class='second'>
                    <li>购物指南1</li>
                    <li>购物指南2</li>
                    <li>购物指南3</li>
                    <li>购物指南4</li>
                </ul>
            </li>

            <li>
                <div class='first'>配送方式</div>
                <ul class='second'>
                    <li>配送方式1</li>
                    <li>配送方式2</li>
                    <li>配送方式3</li>
                    <li>配送方式4</li>
                </ul>
            </li>
            <li>
                <div class='first'>支付方式</div>
                <ul class='second'>
                    <li>支付方式1</li>
                    <li>支付方式2</li>
                    <li>支付方式3</li>
                    <li>支付方式4</li>
                </ul>
            </li>

        </ul>
    </div>
    <!-- 流程 -->
    <div class="tab">
        <div id="tab_bg" class="tab_bg0">
            <div   class="tab_current">
                <a name="index_gwlc_1" class="track" href="#">1.新用户注册</a>
            </div>
            <div   class="tab_common">
                <a name="index_gwlc_2" class="track" href="#">2.挑选商品</a>
            </div>
            <div  class="tab_common">
                <a name="index_gwlc_3" class="track" href="#">3.确认下单</a>
            </div>
            <div  class="tab_common">
                <a name="index_gwlc_4" class="track" href="#">4.订单跟踪</a>
            </div>
            <div   class="tab_common">
                <a name="index_gwlc_5" class="track" href="#">5.验货签收</a>
            </div>
        </div>
    </div>

    <!-- 提交问题 -->

    <div class="jiejue2">

        <h3>这条帮助是否解决了您的问题？</h3>
        <div class="qiehuan">
            <input name="IsAvail" type="radio" value="1" checked="checked"  /> 已解决
            <input name="IsAvail" type="radio" value="0"  /> 未解决
            <input id="ContID" type="hidden" value="1"/>
        </div>

        <div class="wenti" style="display:none">
            <p>问题没解决？请选择原因:</p>
            <p><select name="TrackID" id="TrackID"  >
                <option value="1">文字太多，阅读困难</option>
                <option value="2">内容复杂，看不懂</option>
                <option value="3">描述不清楚</option>
                <option value="99">其他原因</option>
            </select></p>
            <div id="TrackContentDiv" style=" display:none;">
                <p>也可以直接填写原因:</p>
                <p><textarea name="TrackContent" id="TrackContent" cols="45" rows="5"  ></textarea></p>
            </div>
        </div>
        <p class="wenti_result"><a href=" "><img src="data:images/submit_bt.jpg"/></a></p>
    </div>

</div>

</body>
</html>

jQuery实现鼠标滑过导航栏呈现不同的样式的更多相关文章

  1. uwp - 上滑隐藏导航栏下滑显示

    原文:uwp - 上滑隐藏导航栏下滑显示 好久没写博客了,因为忙着工作.昨天周末填坑需要做一个上滑列表数据时隐藏导航栏下滑时显示的效果,下面分享一下我的做法,希望能给你带来帮助. 思路是通过判断滚动条 ...

  2. vue中滚动页面，改变样式&&导航栏滚动时，样式透明度修改

    vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...

  3. 如何用jQuery实现在鼠标滚动后导航栏保持固定

    要实现如下效果,鼠标滚动后,上方导航栏置顶固定 关键html代码: <div class="header-bottom"> <div class="co ...

  4. 用jquery制作一个简单的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. jQuery实现鼠标滑过图片列表加遮罩层

    这个例子实现的功能是:有一列图片列表,鼠标滑过时,将有遮罩层的另一张图盖在该图片的上方,实现鼠标hover的效果. 一.HTML代码: <div class="home-content ...

  6. iOS---实现简书和知乎的上滑隐藏导航栏下拉显示导航栏效果

    因为自己用简书和知乎比较多,所以对其导航栏的效果比较好奇,自己私下里找资料实现了一下.这个效果的关键点在于下方可供滑动的内容的便宜距离inset的改变,以及滑动的scrollview代理的执行,废话不 ...

  7. [iOS微博项目 - 1.1] - 设置导航栏主题（统一样式）

    A.导航栏两侧文字按钮 1.需求: 所有导航栏两侧的文字式按钮统一样式 普通样式:橙色 高亮样式:红色 不可用样式:亮灰 阴影:不使用 字体大小:15   github: https://github ...

  8. 如何控制iOS的导航栏和状态栏的样式

    这是一个很常用的开发场景,就是改变导航栏上的文字颜色与背景色,如果你曾有 windows form 开发经验一定会笑我:"卧槽,这有什么好写的,不就是设置两个属性就可以了吗?" 我 ...

  9. 利用jQuery实现鼠标滑过整行变色

    在很多网站都有这样的效果,那就是当鼠标放在新闻列表一行上的时候,整行就会变色,虽然使用CSS也能够实现此种功能,但是由于众多浏览器版本对于CSS3并没有良好的支持,所以在当前情况下,使用jQuery实 ...

随机推荐

  1. 关于position

    一.position 一)语法: 看了那么久的语法,终于到了讲正题的时间了. 二)定位 1.相对定位:相对元素自己在没有定位之前的位置进行位移,元素仍然保留还没有原来的位置. 特性: 1)不脱离文档流 ...

  2. H5微信通过百度地图API实现导航方式一

    根据业务需求修改百度API,实现微信中的导航功能.因为源码中SearchInfoWindow_min.js有点小问题(部分小城市公交线路少,查不到路线时没有提示),所以这里在源码的基础上改了一点点.可 ...

  3. Centos6.5中Nginx部署基于IP的虚拟…

    Centos6.5 中Nginx 部署基于IP 的虚拟主机 王尚2014.11.18 一.介绍虚拟主机 虚拟主机是使用特殊的软硬件技术,把一台真实的物理电脑主机 分割成多个逻辑存储单元,每个单元都没有 ...

  4. Hibernate与 MyBatis的比较(转)

    第一章     Hibernate与MyBatis Hibernate 是当前最流行的O/R mapping框架,它出身于sf.NET,现在已经成为Jboss的一部分. Mybatis 是另外一种优秀 ...

  5. 正则表达式大全 --【Python举例】

    包含 :  纯文字.正负数,小数.正数.正整数.月份.天数.用户名.密码.车牌.传真.手机.邮件.ipv4私有地址.ipv4地址.ipv6地址.json_header.request_header 有 ...

  6. 1.初入GitHub

    进入github官网,点击右上角注册按钮.  填写账号名,邮箱和密码    选择免费的公开仓库,点击完成就提示注册成功了.   ps:付费一般是给企业用户使用的,用来存放一些不公开的代码.所以是付费的 ...

  7. swift AVAudioPlayer播放音频时声音太小

    设置下声音输出的扬声器就行了 代码如下 do { try AVAudioSession.sharedInstance().overrideOutputAudioPort(AVAudioSessionP ...

  8. vue指令v-bind示例解析

    1.绑定一个属性 <img id="app" v-bind:src="imageSrc"> <script> var app = Vue ...

  9. 58. Length of Last Word【leetcode】

    Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return the l ...

  10. 查看oracle版本信息

    查看oracle的版本信息 (1)用客户端连接到数据库,执行select * from v$instance            查看version项 (2)select * from produc ...