window.location.href（动态输出跳转）

url

http://www.x2y2.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere

1, window.location.href

整个URl字符串(在浏览器中就是完整的地址栏)

本例返回值: http://www.x2y2.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere

 

2,window.location.protocol

URL 的协议部分

本例返回值:    http:

 

3,window.location.host
URL 的主机部分
本例返回值:   www.x2y2.com

 

4,window.location.port
URL 的端口部分
如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符
本例返回值:""

 

5,window.location.pathname
URL 的路径部分(就是文件地址)
本例返回值:   /fisker/post/0703/window.location.html

 

6,window.location.search
查询(参数)部分
除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值
本例返回值:  ?ver=1.0&id=6

 

7,window.location.hash

锚点

本例返回值：#imhere

 

设置或获取对象指定的文件名或路径：window.location.pathname
设置或获取整个 URL 为字符串：window.location.href
设置或获取与 URL 关联的端口号码：window.location.port
设置或获取 URL 的协议部分：window.location.protocol
设置或获取 href 属性中在井号“#”后面的分段：window.location.hash
设置或获取 location 或 URL 的 hostname 和 port 号码：window.location.host
设置或获取 href 属性中跟在问号后面的部分：window.location.search

 

////////////////////////jq///////////////////////////////////
1 $('.collapsed').click(function(){
window.location.href=$(this).attr("ID");//动态的替换当前地址栏的地址（绝对路径不变只替换相对路径）//http:www.appadhoc/direction.html(or)appuse.html
});

  <div class="panel-group doc-nav" id="accordion" role="tablist" aria-multiselectable="true" data-spy="affix" data-offset-top="180" data-offset-bottom="50">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
              <h4 class="panel-title">
                <a role="button" class="collapsed" id="direction.html" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  A/B测试基础 <span class="glyphicon glyphicon-menu-down " class="tr-down"></span>
                </a>
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
              <div class="panel-body">
                <ul class="test">
                  <li><a href="#test1">什么是A/B测试</a></li>
                  <li><a href="#test2">为什么要进行A/B测试</a></li>
                  <li><a href="#test3">如何进行A/B测试</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
              <h4 class="panel-title">
                <a class="collapsed" id="appuse.html"role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                  AppAdhoc平台使用指南 <span class="glyphicon glyphicon-menu-down " class="tr-down"></span>
                </a>
              </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
              <div class="panel-body">
                <ul class="test pad-t-30">
                  <li><a href="#k-p">了解平台</a></li>
                  <li><a href="#y-p">优化指标</a></li>
                  <li><a href="#m-p">模块开关</a></li>
                  <li><a href="#l-p">流量分配</a></li>
                  <li><a href="#s-p">试验管理</a></li>
                  <li><a href="#s-b">试验报告</a></li>
                </ul>
              </div>
            </div>
          </div>