php - 链接到选项卡式菜单

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>

但是，当我在主页上单击其中一个类别时，我的网站会将我重定向到投资组合页面，并始终显示“过滤器事件”类(在我的例子中是“汽车”类)。

我想像这样进行这些重定向:

• 当我点击主页上的“汽车”类别时，我应该 重定向到投资组合页面上的“汽车”类。

• 当我点击主页上的“面包车”类别时，我应该是
  重定向到投资组合页面上的“Van”类。

我想对其他 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 证明概念。

---

$(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>