jQuery windows.location.hash作用

window.location.hash 中的 hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。

# ：代表网页中的一个位置。其页面的字符，就是该位置的标识符

我们知道很多时候做一些问卷调查的时候当用户有的题目没有选择选项的时候需要智能的提示并且定位到没有选择的题目

这个时候的 window.location.hash 锚点就起到作用了

下面是实际的例子

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>彩民情绪压力测试问卷</title>
  <link href="css/base.css" rel="stylesheet" />
  <link href="css/global.css" rel="stylesheet" />
  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>


<link href="css/activity.css" rel="stylesheet" />
<style type="text/css">
  .footer-link{ background: #f1f1f1; color: #999; font-size: 13px;line-height: 40px; border-top: solid #e1e1e1 1px;}
  .footer-link img{ margin: 13px 5px 0 0;}
  .main-title{ padding: 20px 3% 10px 3%; border-top: solid #f5f5f5 2px;}
  .question-list{ padding: 20px 0 0 0;}
  .question-list span{ position: absolute; left: 0; top: 0; font-size: 17px; font-weight: bold;}
  .question-list dt{ padding-left: 20px; position: relative; font-size: 17px;}
  .question-list dd{ padding: 15px 0 5px 0;}
  .question-list a{ padding: 0 0 0 40px;}
  .question-list a:after{ left: 20px; border-color: #959595; width: 14px; height: 14px; margin-top: -8px;}
  .question-list a.active{ color: #45be8d;}
  .question-list a.active:after{border-color: #45be8d;}
  .question-list a.active:before{ left: 23px; margin-top: -5px; width: 10px; height: 10px;}
  .question-list p{ display: none;}
  .question-list div{ padding: 10px 5px; margin-bottom: 16px;}
  .error{ border: dashed #ff0000 1px;}
  .error p{display: block; color: #ff0000; padding-left: 40px;}
  .btn-box{ margin: 0; padding: 13px 0 20px 0;}
  .btn-box .btn-sm{ height: 33px; line-height: 30px; font-size: 16px;}
</style>
<div class="contenter special">
  <header><a class="back" href="/"><i class="icon icon-xs icon-back"></i></a><h1 class="title"></h1></header>
  <section class="tac">
    <h3 class="main-title">你有赌博心理吗？</h3>
    <p class="gray">下面每一个问题，请针对自己的实际情况做出选择。</p>
  </section>
  <section class="content clearfix">
    <dl class="question-list">
      <div id="tm1">
        <dt><span>1.</span>您是否因彩票而对自己的家庭、朋友、爱好失去或减少了兴趣？</dt>
        <dd><a class="active">A、是的</a></dd>
        <dd><a>B、有时</a></dd>
        <dd><a>c、还好</a></dd>
        <dd><a>D、不是</a></dd>
      </div>
      <div class="error" id="tm2">
        <dt><span>2.</span>您是否因彩票而对自己的家庭、朋友、爱好失去或减少了兴趣？</dt>
        <dd><a class="active">A、是的</a></dd>
        <dd><a>B、有时</a></dd>
        <dd><a>c、还好</a></dd>
        <dd><a>D、不是</a></dd>
        <p>请选择选项!</p>
      </div>
      <div class="error" id="tm3">
        <dt><span>1.</span>猫和狗你更喜欢哪一个？</dt>
        <dd><a class="active">A、是的</a></dd>
        <dd><a>B、有时</a></dd>
        <dd><a>c、还好</a></dd>
        <dd><a>D、不是</a></dd>
        <p>请选择选项!</p>
      </div>
      <div id="tm4">
        <dt><span>1.</span>猫和狗你更喜欢哪一个？</dt>
        <dd><a class="active">A、是的</a></dd>
        <dd><a>B、有时</a></dd>
        <dd><a>c、还好</a></dd>
        <dd><a>D、不是</a></dd>
      </div>
    </dl>
  </section>
  <section class="btn-box tac">
    <a class="btn btn-green btn-sm btn-radius">提交答卷</a>
  </section>
</div>
<a class="footer-link tac block"><img src="images/icon/logo-xs.png" height="14" />提供彩民心理服务</a>
</body>
</html>

$(function(){
    window.location.hash = "";

    window.location.hash = "#tm1""; //定位到当前页面id 
})

执行这个之后页面路径地址就为 http://www.xinjue.com:8080/test#tm1

1:#是用来指导浏览器动作的，对服务器端完全无用。所以，HTTP请求中不包括#

2:单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页。

码奴生来只知道前进~

发布了72 篇原创文章 · 获赞 3 · 访问量 2万+

私信关注

jQuery windows.location.hash作用

猜你喜欢