利用location对象控制文档显示的位置

最新推荐文章于 2023-05-17 22:46:33 发布

Qiustion

最新推荐文章于 2023-05-17 22:46:33 发布

阅读量668

点赞数

分类专栏： HTML5+CSS3+JS

本文链接：https://blog.csdn.net/Qiustion/article/details/50738926

版权

HTML5+CSS3+JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
Location 对象存储在Window对象的Location属性中，表示浏览器当前显示的文档的 URL（或位置）。
location.href属性存放的是文档的完整 URL。可以利用location.href属性来控制浏览器显示的文档的位置。
如果把一个含有 URL 的字符串赋予 Location 对象或它的 href 属性，浏览器就会把新的 URL 所指的文档装载进来，并显示出来。

例子：在menuTest.html里点击不同块，打开block.html里对应的块文档位置

menuTest.html部分代码：

<BODY>
  <div class="menuDiv">
    <div class="menuItem blue">blue</div>
    <div class="menuItem red">red</div>
    <div class="menuItem purple">purple</div>
  </div>
 </BODY>

<script type="text/javascript">
  $(function(){
    $('.menuDiv').children('.menuItem').on('click',function(){
      var target=$(this).index();
      switch(target){
      case 0:
            window.location.href="block.html?1";
            break;
      case 1:
            window.location.href="block.html?3";
            break;
      case 2:
            window.location.href="block.html?5";
            break;
      }
    });
  });
</script>

block.html代码：

<body>
<div class="blockDiv">
  <div class="blockBoxDiv">
    <div class="blockBox yellow"></div>
    <div class="blockBox blue"></div>
    <div class="blockBox orange"></div>
    <div class="blockBox red"></div>
    <div class="blockBox brown"></div>
    <div class="blockBox purple"></div>
  </div>
  <div class="blockItemDiv">
    <div class="blockItem yellow" style="display:block;"></div>
    <div class="blockItem blue"></div>
    <div class="blockItem orange"></div>
    <div class="blockItem red"></div>
    <div class="blockItem brown"></div>
    <div class="blockItem purple"></div>
  </div>

</div>
</body>

<script type="text/javascript">
  $(function(){
    var num=location.href.split('?')[1];
    num=num==-1?0:num;
    num=num==undefined?0:num;

    $('.blockBoxDiv').children('.blockBox').on('click',function(){
      var target=$(this).index();
      $(this).animate({width:'80'},1500).siblings().animate({width:'25'},500);
      $(this).parent().siblings('.blockItemDiv').children('.blockItem').fadeOut(0).eq(target).fadeIn(1000);
    }).eq(num).click();
  });

</script>

block.html文档在加载完成前，就读取当前的location.href属性，截取num值，并使用eq(num)函数来，响应('.blockBox')的点击事件，即是相当于点击('.blockBox')第num个索引。

附上CSS代码：

.menuDiv{height:25px;border:#747474 solid 1px;position:absolute;left:260px;top:10px;}
.menuDiv .menuItem{width:50px;height:25px;text-align:center;float:left;cursor:pointer;font:12px /25px "Arial";}
.menuDiv .menuItem.red{background:red;}
.menuDiv .menuItem.blue{background:blue;}
.menuDiv .menuItem.purple{background:purple;}

.blockDiv{position:absolute;margin:40px;}
.blockDiv .blockBoxDiv{border:1px solid #eeeeee;float:left;}
.blockDiv .blockBoxDiv .blockBox{width:25px;height:25px;float:left;cursor:pointer;}
.blockDiv .blockBoxDiv .blockBox.yellow{background:yellow;}
.blockDiv .blockBoxDiv .blockBox.blue{background:blue;}
.blockDiv .blockBoxDiv .blockBox.orange{background:orange;}
.blockDiv .blockBoxDiv .blockBox.red{background:red;}
.blockDiv .blockBoxDiv .blockBox.brown{background:brown;}
.blockDiv .blockBoxDiv .blockBox.purple{background:purple;}
.blockDiv .blockItemDiv{border:1px solid #efefef;margin-top:26px;}
.blockDiv .blockItemDiv .blockItem{width:300px;height:50px;display:none;}
.blockDiv .blockItemDiv .blockItem.yellow{background:yellow;}
.blockDiv .blockItemDiv .blockItem.blue{background:blue;}
.blockDiv .blockItemDiv .blockItem.orange{background:orange;}
.blockDiv .blockItemDiv .blockItem.red{background:red;}
.blockDiv .blockItemDiv .blockItem.brown{background:brown;}
.blockDiv .blockItemDiv .blockItem.purple{background:purple;}

--------记录完毕-----