链接到另一个带有jQuery元素的页面

Linking to another page with a jQuery element

本文关键字：元素 jQuery 另一个 链接      更新时间：2023-09-26

标题听起来可能有点混乱，因为我不知道如何措辞，但这是我的情况。

假设我有两页。一个是我的主页，另一个是展示页面。

我想完成的是这个。当我单击索引页面上的 Showcase 1 链接时，我希望浏览器转到 Showcase 页面并自动打开第一个 Showcase。这可能吗？

主页有一个代码段，如下所示：

<a href="#">Showcase 1</a>
<a href="#">All Showcases</a>

展示页面有一个代码段，如下所示：

$(document).ready(function() {
  
  $('.showcases').css('display', 'none');
  
  $('#showcase-link-one').click(function() {
    $('#showcase-two').stop(true, true).hide('fast');
    $('#showcase-three').stop(true, true).hide('fast');
    $('#showcase-one').stop(true, true).show('fast');
  });
  
  $('#showcase-link-two').click(function() {
    $('#showcase-one').stop(true, true).hide('fast');
    $('#showcase-three').stop(true, true).hide('fast');
    $('#showcase-two').stop(true, true).show('fast');
  });
  
  $('#showcase-link-three').click(function() {
    $('#showcase-one').stop(true, true).hide('fast');
    $('#showcase-two').stop(true, true).hide('fast');
    $('#showcase-three').stop(true, true).show('fast');
  });
});
ul {
    list-style-type: none;
}
.showcase-link {
    text-decoration: none;
}
.showcase-link:hover { 
    color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="showcase-header">
  <ul>
    <li><a href="#" id="showcase-link-one" class="showcase-link">Showcase One</a></li>
    <li><a href="#" id="showcase-link-two" class="showcase-link">Showcase Two</a></li>
    <li><a href="#" id="showcase-link-three" class="showcase-link">Showcase Three</a></li>
  </ul>
</div>
<div class="showcases" id="showcase-one">
  <p>You Clicked on Showcase One</p>
</div>
<div class="showcases" id="showcase-two">
  <p>You Clicked on Showcase Two</p>
</div>
<div class="showcases" id="showcase-three">
  <p>You Clicked on Showcase Three</p>
</div>

一种方法是在单击该链接时在URL中设置哈希。

<a href="http://example.com/#link-one">Showcase 1</a>

然后使用 JS，您可以使用window.location.hash检查哈希并打开正确的展示。

假设您将所有可点击的展示集保存在一个数组中

var showcase = ['#link-one', '#link-two', '#link-three'];
$(document).ready(function() {
  $('.showcases').css('display', 'none');
  $('#showcase-link-one').click(function() {
    $('#showcase-two').stop(true, true).hide('fast');
    $('#showcase-three').stop(true, true).hide('fast');
    $('#showcase-one').stop(true, true).show('fast');
  });
  $('#showcase-link-two').click(function() {
    $('#showcase-one').stop(true, true).hide('fast');
    $('#showcase-three').stop(true, true).hide('fast');
    $('#showcase-two').stop(true, true).show('fast');
  });
  $('#showcase-link-three').click(function() {
    $('#showcase-one').stop(true, true).hide('fast');
    $('#showcase-two').stop(true, true).hide('fast');
    $('#showcase-three').stop(true, true).show('fast');
  });
  if($.inArray(window.location.hash, showcase)) // check to see if it's a showcase 
     $( '#showcase-' + window.location.hash.replace('#') ).trigger('click')
});

像这样，您可以在链接中发送信息并在下一页上使用它。

如果将代码更改为以下作品集，则页面加载时将运行一个。

$(document).ready(function() {
  $('.showcases').css('display', 'none');
  $('#showcase-link-one').click(function() {
    $('#showcase-two').stop(true, true).hide('fast');
    $('#showcase-three').stop(true, true).hide('fast');
    $('#showcase-one').stop(true, true).show('fast');
  });
  $('#showcase-link-two').click(function() {
    $('#showcase-one').stop(true, true).hide('fast');
    $('#showcase-three').stop(true, true).hide('fast');
    $('#showcase-two').stop(true, true).show('fast');
  });
  $('#showcase-link-three').click(function() {
    $('#showcase-one').stop(true, true).hide('fast');
    $('#showcase-two').stop(true, true).hide('fast');
    $('#showcase-three').stop(true, true).show('fast');
  });
  $('#showcase-link-one').trigger('click');
});
相关文章：