URL hash link doesn't shift page to element with matching ID

Question

Currently this is my site

file:///C:/Users/CW/workspace/CASE-STUDY-CW/WebContent/index1.html

I have this code

<td><a href="#menu4"><span class="glyphicon glyphicon-wrench"></span></a></td>

which I want to link to my div with id menu4 when clicked

<div id="menu4" class="tab-pane fade">
        <h2>Modify Defect Details</h2>
        <div class="form-group dropdown col-lg-6">
            <div class="col-lg-12">
            <label>Defect ID #</label>
            </div>

but instead it just add #menu4 at my site

file:///C:/Users/CW/workspace/CASE-STUDY-CW/WebContent/index1.html#menu4

what seems to be the problem here? but when I'm using this

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
            <li><a data-toggle="tab" href="#menu1">Report a Defect</a></li>
            <li><a data-toggle="tab" href="#menu2">View all Defects</a></li>
            <li><a data-toggle="tab" href="#menu3">Defect Details</a></li>

when I click on Defect Details, it switch to div id=menu3 hopefully this is also the same what I want with the clicking of glyphicon

Nothing is being "added" at your site. The browser shows the URL that the link specified. Why it's not shifting the page down is another question. Without a demo we probably can't help. — isherwood, Dec 16 '15 at 15:11
What makes you think that this should work? Are you following a guide that recommends this approach? — Adrian Wragg, Dec 16 '15 at 15:12
@AdrianWragg This is a technique in common use. ID hash references have largely supplanted name attribute references in URLs. — isherwood, Dec 16 '15 at 15:13
As you can see, there's no problem with this approach. https://jsfiddle.net/yttfqhhL The problem is somewhere outside of what you've posted. Without more information, this question is off-topic. — isherwood, Dec 16 '15 at 15:15
@isherwood They have, I just wanted to be sure OP wasn't simply posting data from a guide giving incorrect information. — Adrian Wragg, Dec 16 '15 at 15:16
@isherwood omg, while posting this post, I found out what's the problem, I just also need to use the data-toggle="tab" so that it switch to that div tab! hahahaha. well thanks anyway for trying to help! that was really dumb!! — Chong, Dec 16 '15 at 15:22
@Chong Are you saying this doesn't work at all, or that it's not jumping on the page? — James Ives, Dec 16 '15 at 15:23
No problem. Please delete your question or post an answer if you think it'll help others. Be sure to explain in detail. — isherwood, Dec 16 '15 at 15:23

score 0 · Answer 1 · answered Dec 16 '15 at 15:28

I should have also use the

data-toggle="tab"

for the linking of glyphicon. With only using this code

<a href="#menu4"><span class="glyphicon glyphicon-wrench"></span></a>

It only adds #menu4 at the end of the url

ex. file:///C:/Users/CW/workspace/CASE-STUDY-CW/WebContent/index1.html#menu4

But with the

<a data-toggle="tab" href="#menu4"><span class="glyphicon glyphicon-wrench"></span></a>

It now switches to the div with id=menu4

URL hash link doesn't shift page to element with matching ID

1 Answers1