链接到选项卡式菜单答案

【问题标题】：Make a link to the tabbed menu链接到选项卡式菜单
【发布时间】：2017-01-14 16:28:09
【问题描述】：

我正在尝试创建指向选项卡式菜单的链接。我的主页上有 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”类别时，我应该是
重定向到投资组合页面上的“Van”类。

我想用其他 2 个类别做同样的事情。

有什么办法可以做到吗？

【问题讨论】：

您是否正在尝试实现一页布局的网页？您要滚动（或跳转到类别，还是加载完全不同的 URL？
有 2 个不同的页面。主页和投资组合页面。我想从主页实现投资组合页面上的某个类。

标签： php html css url tabs

【解决方案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>

【讨论】：