I'm using the Scroll Javascript and have found the problem with the tabs, which is that it is conflicting with the scroll javascript. i.e.

                <ul class="nav nav-tabs">
                  <li class="active"><a data-toggle="tab" href="#menu1">menu1 </a></li>
                  <li><a data-toggle="tab" href="#menu2">Menu2 </a></li>
                  <li><a data-toggle="tab" href="#menu3">Menu3</a></li>
                </ul>

Is it possible to link to tabs without using the anchor? (#menu1)

Kind Regards,

I'm using the Scroll Javascript and have found the problem with the tabs, which is that it is conflicting with the scroll javascript. i.e.

                <ul class="nav nav-tabs">
                  <li class="active"><a data-toggle="tab" href="#menu1">menu1 </a></li>
                  <li><a data-toggle="tab" href="#menu2">Menu2 </a></li>
                  <li><a data-toggle="tab" href="#menu3">Menu3</a></li>
                </ul>

Is it possible to link to tabs without using the anchor? (#menu1)

Kind Regards,

• javascript
• jquery
• html

• Yes, but for accessibility reasons i would advise against it. – BReal14 Commented Jul 20, 2015 at 20:17
• change the scroll code to ignore anything inside the nav-tabs. Need to see scroll code used – charlietfl Commented Jul 20, 2015 at 20:18
• think you should be able to use data-target at this point – Lieutenant Dan Commented Jul 20, 2015 at 20:19

3 Answers 3

You can use data-target attribute instead:

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a data-target="#tab1" role="tab" data-toggle="tab">First Tab</a></li>
    <li role="presentation"><a data-target="#tab2" role="tab" data-toggle="tab">Second Tab</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="tab1">Content 1</div>
  <div role="tabpanel" class="tab-pane" id="tab2">Content 2</div>
</div>

Here is a Working Fiddle

Appears so:

<div id="tabs">
    <ul class="super">
        <li><a>title 1</a></li>
        <li><a>title 2 </a></li>
    </ul>
    <div>
        content1
    </div>
    <div>
        content2
    </div>
</div>
<script>
    $(function () {
        $("#tabs ul.super li a").each(function (index) {
            $(this).attr("href", "#spec" + index.toString());            
        });
        $("#tabs div").each(function (index) {
            $(this).attr("id", "spec" + index.toString());
        })
        $("#tabs").tabs();
    });      
</script>

Source: is it possible to use Tabs without using anchor tag and id?

I solved this by changing the following line from

var d = $("#scroller-anchor").offset({scroll:false}).top;

to

var d = $("#scroller-anchor").offset().top;