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

不必问山谷

于 2022-12-01 22:47:05 发布

阅读量1.6k

点赞数 3

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/li_xinyide/article/details/128140153

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>凡客诚品帮助中心页面</title>

 //jQuery代码

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

    <script>

            $(function () {

              // 1.左导航

              $(".first").click(function () {

                $(this).next().show().parent().siblings().children("ul").hide();

              });



              // 2.帮助中心

              $(".search").focus(function () {

                  $(this).attr('value','');

                }).blur(function () {

                    $(this).attr('value','请输入要查询的问题');

                });



                // 3.购物流程  也可以用addClass和removeClass解决

                $(".tab_common").hover(function(){
                 //链式jq一定长，可以选择不用链式jq

                  $(this).attr('class','tab_current').siblings('div')

                  
             .attr('class','tab_common').parent().attr('class','tab_bg'+$(this).index());

                });




                // 4.解决问题

              $(".qiehuan input:eq(1)").click(function () {

                $(".wenti").show();

                // $("#TrackContentDiv").show();

              });



            });

    </script>

 //css样式

    <style type="text/css">

      * {

        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;

      }

    </style>

</head>

 //body部分

  <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_common">

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

</html>