Question

我试图链接到标签式菜单。我在主页上有4个类别（汽车，面包车，卡车和特殊）。每个类别都是投资组合页面的链接。

我的投资组合页面包含一个简单的过滤选项卡式菜单。像这样：

<ul id="filters" class="clearfix">
        <li><span class="filter active" data-filter=".car">Car</span></li>
        <li><span class="filter" data-filter=".van">Van</span></li>
        <li><span class="filter" data-filter=".truck">Truck</span></li>
        <li><span class="filter" data-filter=".special">Special</span></li>
</ul>

但是当我点击主页上的其中一个类别时，我的网站会将我重定向到投资组合页面，并始终显示我＆＃34;过滤活动＆＃34;上课（在我的例子中是＆＃34; car＆＃34; class）。

我想像这样制作这些重定向：

当我点击＆＃34; Car＆＃34;在主页上的类别，我应该是重定向到＆＃34; Car＆＃34;投资组合页面上的课程。
当我点击＆＃34; Van＆＃34;在主页上的类别，我应该是重定向到＆＃34; Van＆＃34;投资组合页面上的课程。

我想和其他2个类别一样。

有没有办法做到这一点？

Answer 1

以这种方式制作portfolio页面时，您可以在homepage中使用

<a href="portfolio.html#car">Scroll to car</a>
<a href="portfolio.html#van">Scroll to van</a>

使用哈希重定向到portofilo页面，并根据哈希值，此处包含的脚本决定应该滚动哪个元素以及菜单的哪个元素应该获得类active。

使用jQuery来证明concepct。

$(function() {
  var filters = $('#filters');
  var hash = location.hash ? location.has : 'car';
  
  filters.find('[data-filter='+hash+']').addClass('active');
  $('html, body').animate({
        scrollTop: $(".target-"+hash).offset().top
    }, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filters" class="clearfix">
  <li><span class="filter" data-filter="car">Car</span>
  </li>
  <li><span class="filter" data-filter="van">Van</span>
  </li>
  <li><span class="filter" data-filter="truck">Truck</span>
  </li>
  <li><span class="filter" data-filter="special">Special</span>
  </li>
</ul>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div class="target-car">Car</div>
<div class="target-van">van</div>

链接选项卡式菜单

1 个答案: