0

I was trying this code but the tag name didn't show on URL when I click on <a>. My friend told me to separate files but I don't want to. Is there anyway to solve this problem or Could you advice me any tips like this? I found this one but it's quite different from mine How do I link to part of a page? (hash?)

<div class="list-group">
 <a class="list-group-item" href="#picture" data-toggle="tab">Picture</a>
 <a class="list-group-item" href="#home" data-toggle="tab">Profile</a>
</div>

<div id="myTabContent" class="tab-content">
 <div class="tab-pane fade" id="picture">
  <h1>Picture</h1>
 </div>
 <div class="tab-pane fade" id="home">
  <h1>Profile</h1>
 </div>
</div>

P.S. it's Bootstrap

Community
  • 1
  • 1
Keo
  • 39
  • 1
  • 8
  • Can you explain what is "tag name didn't show on URL"? you don't want to display `#name` in URL? – Rohit Jul 06 '16 at 05:11
  • Sorry I didn't explain clearly because my English's not good enough. The point is I want #name to show after URL, example: test.php#picture when I clicked on – Keo Jul 06 '16 at 05:13
  • No problem dude. We don't mind the language, we are here to help each other. – Rohit Jul 06 '16 at 05:18
  • Your code is perfect, You just create a test.php file and test it on localhost – Rohit Jul 06 '16 at 05:21
  • It works well but the URL didn't change when I clicked to an anchor. It still show test.php not test.php#picture – Keo Jul 06 '16 at 05:28
  • that's becase there is no overflow in your page, because you don't have much content. If you resize the browserwindow so that you see the scrollbars, try clicking at your link and you will see the result you want. Your code is perfect. Hope this helps :) –  Jul 06 '16 at 05:31

4 Answers4

0

Hash tag(#) in anchor tag (<a>) are used to scroll down to that div, if they are on same page. Try this example, when you click it scroll to following div.

<div class="list-group">
    <a class="list-group-item" href="#picture" data-toggle="tab">Picture</a>
    <a class="list-group-item" href="#home" data-toggle="tab">Profile</a>
</div>

<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade" id="picture">
        <h1>Picture</h1>
    </div>
    <div class="tab-pane fade" id="home">
        <h1>Profile</h1>
    </div>
</div>

body{
  height:1200px;
}

#picture{
  height:600px;
  background:#f22;
}
#home{
 height:600px;
  background:#ccc;
  }
frnt
  • 8,455
  • 2
  • 22
  • 25
  • Remove your url test.php – frnt Jul 06 '16 at 05:06
  • You copy this code and try this in jsfiddle, you would be able to figure what's wrong. – frnt Jul 06 '16 at 05:08
  • I already copied(both html and css) and tried your code but it still didn't work – Keo Jul 06 '16 at 05:10
  • I tried your code in jsfiddle but It didn't support Bootstrap, so I tried it in localhost and It works well but URL didn't change – Keo Jul 06 '16 at 05:33
  • That's bootstrap tab issue, when you remove data-toggle and try it show #links in browser. But tab toggle won't work. So here is the link you have to add jquery for this http://stackoverflow.com/questions/7862233/twitter-bootstrap-tabs-go-to-specific-tab-on-page-reload-or-hyperlink – frnt Jul 06 '16 at 05:35
  • Sorry for asking. Which one? or Could you edit your code above? I'm not good on jquery – Keo Jul 06 '16 at 05:43
  • Try out Naga Sai A answer. – frnt Jul 06 '16 at 06:27
0

after reading comments it seems like you are having a .php file and did not start localhost.change your extension to .html or or use it on localhost

payforbs MY
  • 9
  • 4
0

You won't see the anchor effect because there is not much content in your site and therefore there is no overflow. You can see the effect you want by resizing the browser window so that one piece of the content does not fit. Then when you test your links you will see the desired result. Or you can add some CSS to make the page not fit to the browser window, just to see the effect like this: (you can test it full size as well)

div#myTabContent{
  position: absolute;
  height: 120%;
  border: 1px solid #ebebeb;
}
<div class="list-group">
 <a class="list-group-item" href="#picture" data-toggle="tab">Picture</a>
 <a class="list-group-item" href="#home" data-toggle="tab">Profile</a>
</div>

<div id="myTabContent" class="tab-content">
 <div class="tab-pane fade" id="picture">
  <h1>Picture</h1>
 </div>
 <div class="tab-pane fade" id="home">
  <h1>Profile</h1>
 </div>
</div>
It is not the best example, but it shows that your code is right. Hope this helps
0

To achieve expected result, use onclick function with location.href to show tag name 

<div class="list-group">
    <a class="list-group-item" href="#picture" onclick="location.href='#picture'" data-toggle="tab">Picture</a>
    <a class="list-group-item" href='#home' onclick="location.href='#profile'" data-toggle="tab">Profile</a>
</div>

<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade" id="picture">
        <h1>Picture</h1>
    </div>
    <div class="tab-pane fade" id="home">
        <h1>Profile</h1>
    </div>
</div>
Naga Sai A
  • 10,771
  • 1
  • 21
  • 40
  • This helpful, but when I reload Page the content disappeared. Do you know how to remain it? – Keo Jul 06 '16 at 06:23