0

I'm totally lost... For some reason I can't figure out why my anchor isn't appended to my url.

Literally everything I have right now is this:

<div class="tab" role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
        <a href="#general" aria-controls="general" role="tab" data-toggle="tab" id="generaltab">Daten</a>
    </li>
    <li role="presentation">
        <a href="#details" aria-controls="details" role="tab" data-toggle="tab">Details</a>
    </li>
    <li role="presentation">
        <a href="#zusatz" aria-controls="zusatz" role="tab" data-toggle="tab">Zusatz</a>
    </li>               
</ul>
</div>

I can even see the correct link in my preview, with the # appended in the final link. But it simply won't show up in my adress-bar.

  • I'm using jQuery + Boostrap (even though no jquery in this particular code-snippet)
  • I'm testing this in Chrome + IE

The tabs (panels) are correctly switched, so I guess the anchor itself is working - But that still doesn't explain why it is missing in my adress bar.

It works as a standalone though. If I just extract this code, copy & paste it into a new file, everything works fine. What might cause this problem? No JS-errors in my console.

Am I just blind?

copy & paste for testing purposes

<html>
    <head>
        <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>
    <body>
        <div class="tab" role="tabpanel">
            <ul class="nav nav-tabs" role="tablist">
                <li role="" class="active">
                    <a href="#general" aria-controls="general" role="tab" data-toggle="tab" id="generaltab">Daten</a>
                </li>
                <li role="">
                    <a href="#details" aria-controls="details" role="tab" data-toggle="tab" id="detailstab">Details</a>
                </li>               
            </ul>

            <div class="tab-content tabs contentarea">
                <div role="tabpanel" id="general" class="tab-pane fade in active">
                    test
                </div>

                <div role="tabpanel" id="details" class="tab-pane">
                    test 123 123
                </div>
            </div>
        </div>
    </body>
</html>
DasSaffe
  • 2,080
  • 1
  • 28
  • 67
  • 1
    *"I'm using jQuery"* - How? What you show and describe is HTML only. This may be the cause though, if there is a script hijacking the click events of the links. But then this isn't literally everything you have right now. – GolezTrol Feb 06 '18 at 13:40
  • well, it is in my project. It isn't in that particular code-piece. Thought this might be relevant for eventual problems – DasSaffe Feb 06 '18 at 13:41
  • @GolezTrol I managed to reduce it to the total minimum - it seems related to bootstraps JS-file. You can try it out now – DasSaffe Feb 12 '18 at 12:58
  • _“What might cause this problem?”_ - this is done _intentionally_ ... Compare the code the docs show for implementing this manually, https://getbootstrap.com/docs/3.3/javascript/#tabs-usage - if you let bootstrap handle this instead of triggering it via your own code, still the same thing happens, the default event action is suppressed - for the simple reason that this would make the browser “jump” to the referred element, scrolling the page so that it lands at the top viewport corner, and with a tabbed interface you usually _don’t_ want that behavior. – CBroe Feb 12 '18 at 13:15

0 Answers0