Targeting tab content

JavaScript
1

Hi I have a dropdown nav that targets content in panels,
however on the actual product page when I want to
select a product option it does not go to
the respective tab in my panels. PAGE

It works fine on the other pages and it
goes to its respective tab but for some
reason it does work on the actual product page.

1 Like
2

That link loads the content for “Sonic Toothbrush Travel Plus” for me in firefox.

3

Yeah what I am saying is on the nav product dropdown link
when select a different product from that page it does not
go to that respective tab.

4

Ah, bootstrap initializes the active tab on page load, when you follow the links in the drop down you don’t get a page load, links with href=“#anchor” just jump to that section.

I suspect you’ll want to catch clicks to the top menu and then open the tab with the javascript api.

Have a go and post back if you have questions.

1 Like
5

You know what I am talking about thought right?

On that page the product links dont go to their respective tab
when clicked on.

Should I use this script to activate them on click?

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

I am talking about these links:

when you are on the actual product page not on the others…

6

Yes, try and understand my reply again, it answers your question.

That code you posted is close, try running these on in the console on your page.

$('a[href="#minisonic"]').tab('show')
$('a[href="#sonictravel"]').tab('show')

What you want to do is capture clicks in the menu up top and call the above for the relevant links.

Give your product menu an id=“product-nav” and add this script to the product page.

$('#product-nav').on('click', 'a', function(event) {
  event.preventDefault();

  var $el = $(event.target).closest(a);
  var hash = $el.attr('href').split('#')[1];
  $('a[href="#"' + hash + ']').tab('show');
})
1 Like
8

I put the id on the product menu

 <ul id="product-nav" class="dropdown-menu">
                  <li><a href="http://preferreddentist.com/products.html#sonictooth">Sonic Toothbrush</a></li>
                  <li><a href="http://preferreddentist.com/products.html#sonictoothheads">Sonic Toothbrush Heads</a></li>
                  <li><a href="http://preferreddentist.com/products.html#sonictravel">Sonic Toothbrush Travel</a></li>
                  <li><a href="http://preferreddentist.com/products.html#sonictravelplus">Sonic Toothbrush Plus</a></li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>

and I put the script at the bottom of the page and it does not work:

 <script>
    $('a[href="#minisonic"]').tab('show')
    $('a[href="#sonictravel"]').tab('show')
        
        $('#product-nav').on('click', 'a', function(event) {
              event.preventDefault();

              var $el = $(event.target).closest(a);
              var hash = $el.attr('href').split('#')[1];
              $('a[href="#"' + hash + ']').tab('show');
            })
  </script>
9

I cannot see that script on this page:
http://preferreddentist.com/products.html

Make sure this script is loaded after jQuery, otherwise you’ll get an error.

<script>
$(function() {
  $('#product-nav').on('click', 'a', function(event) {
    event.preventDefault();
    var $el = $(event.target).closest(a);
    var hash = $el.attr('href').split('#')[1];
    $('a[href="#"' + hash + ']').tab('show');
  })
})
</script>
10

Ok it is in there now under the Jquery
but does not function.

  $('a[href="#minisonic"]').tab('show')
  $('a[href="#sonictravel"]').tab('show')
  
  $('#product-nav').on('click', 'a', function(event) {
      event.preventDefault();

      var $el = $(event.target).closest(a);
      var hash = $el.attr('href').split('#')[1];
      $('a[href="#"' + hash + ']').tab('show');
    })
11

Ok, you haven’t added id=“product-nav” to the dropdown and there was a typo on this line.

var $el = $(event.target).closest(a);

Use this script instead.

<script>
    $('#product-nav').on('click', 'a', function(event) {
          event.preventDefault();

          var $el = $(event.target).closest('a');
          var hash = $el.attr('href').split('#')[1];
          $('a[href="#' + hash + '"]').tab('show');
        })
</script>

These sections were only for explaining how the script worked, they don’t need to be included.

$('a[href="#minisonic"]').tab('show')
$('a[href="#sonictravel"]').tab('show')
1 Like
12

I see it works now thank you for your help.

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.