CODEWITHSUNDEEP
phphtmlcssurltabs
Andrii Pryimak
Andrii Pryimak

Reputation: 817

Make a link to the tabbed menu

I'm trying to make links to the tabbed menu. I have 4 categories on the homepage (car, van, truck and special). Each of these categories are links to the portfolio page.

My portfolio page consists of a simple filtered tabbed menu. Something like this:

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

But when I click on one of those categories on the homepage, my website redirects me to the portfolio page and always show me "filter active" class (in my case it is "car" class).

And I want to make these redirects like this:

The same I want to make with 2 other categories.

Is there any way to make this?

Upvotes: 1

Views: 61

Answers (1)

jukben
jukben

Reputation: 1098

When you make your portfolio page in this way you could use in homepage: 

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

to redirect to portofilo page with hash, and based on hash the script included here decide on which element should scroll and which element of the menu should get class active.

Using jQuery for prove of 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>

Upvotes: 1

Related Questions