用jquery制作凡客诚品帮助中心页面

最新推荐文章于 2024-07-06 21:35:02 发布

sam_文刀

最新推荐文章于 2024-07-06 21:35:02 发布

阅读量2.1w

点赞数 20

分类专栏： js 文章标签： jquery 导航

本文链接：https://blog.csdn.net/qq_39879340/article/details/78189258

版权

js 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

左导航，当前二级菜单项展开时，其余导航项关闭
帮助中心，文本框获得焦点时，默认文字消失，失去焦点时，再次显示文字
购物流程，鼠标指针移过时，当前项高亮显示，鼠标指针移至父元素或祖先元素时，依旧高亮，只有当鼠标指针移至其同辈元素时，同辈元素高亮，而去掉该元素高亮样式
问题解决，选中按钮“未解决”时显示相关内容
这里写图片描述

<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>购物流程</li>
                    <li>服务条款</li>
                    <li>积分计划</li>
                    <li>取消订单</li>
                </ul>
            </li>

              <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>在线支付</li>
                    <li>货到付款</li>
                    <li>VANCL礼品卡</li>
                    <li>发票制度</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="images/submit_bt.jpg"/></a></p> 
    </div> 

</div>
</body>

*{
    margin:0px;
    padding:0px;
    font-size:12px;
}
#bodyDiv{
    position:relative;
    background:#FFF url(../images/bg.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;
}
.act{
     background-color: #008844;
 }
.acta{
    background-color: white;
}

$(document).ready(function () {
    $(".first").click(function () {
        $(this).next().show().end().parent().siblings().children("ul").hide();
    });
    $(".search").focus(function () {
        $(this).attr({"value": ""});
    }).blur(function () {
        if ($("input").attr("value") == "") {
            $(this).attr({"value": "请输入要查询的问题"});
        }
    });
    $(".qiehuan input:eq(1)").click(function () {
        $(".wenti").show();
    });
    $(".second li").each(function () {
        $(this).mouseover(function () {
            $(this).addClass("act").siblings().removeClass("act").end().parent().prev().addClass("act").end().parents().siblings().children(".first").removeClass("act");
        });
    });
});

sam_文刀

关注

20
点赞
踩
60

收藏

觉得还不错? 一键收藏
8
评论
用jquery制作凡客诚品帮助中心页面

左导航，当前二级菜单项展开时，其余导航项关闭帮助中心，文本框获得焦点时，默认文字消失，失去焦点时，再次显示文字购物流程，鼠标指针移过时，当前项高亮显示，鼠标指针移至父元素或祖先元素时，依旧高亮，只有当鼠标指针移至其同辈元素时，同辈元素高亮，而去掉该元素高亮样式问题解决，选中按钮“未解决”时显示相关内容 <body><div id="bodyDiv"> <!-- 输入框 -
复制链接

扫一扫

专栏目录