How to create links to sections on the same page (but different tab) in HTML

user_17692032 0
Viewed 62

As the question says I want to make hypertext in my page which contains 4 tabs (R Markdown file knitted as HTML). I know this method works well within the same page that doesn't have different tabs but it didn't work with me.

Using the #id selector <p id="opening">Hyperlinks are utilized by a web browser to move from one page to another...</p>

Creating a link to the selector <a href="#opening">Take me to the opening paragraph.</a>

Can you please help me with that?

For example in the "home" tab I want a hypertext that directs the user to a specific section in "about us" tab

Thanks in advance

Btw, I am using HTML with R Markdown to knit the file.

r-markdown r css html javascript
1 Answers

This is something that you can do. You can assign a width and height for your container, then overflow: auto. Each children has to have the same height and same width as the container, therefore, if you have several children, this will overflow.

What the hyperlink or tab does when you click, it scroll to view on the said children.

.container {
  width: 200px;
  height: 200px;
  overflow: auto;
}

.child {
  display: block;
  background: aliceblue;
  height: 200px;
}
<div class="container">
<div class="tabs">
<a href="#Tab-1">Tab-1</a>
<a href="#Tab-2">Tab-2</a>
<a href="#Tab-3">Tab-3</a>
</div>
<div id="Tab-1" class="child">
Tab 1
</div>
<div id="Tab-2" class="child">
Tab 2
</div>
<div id="Tab-3" class="child">
Tab 3
</div>
</div>

user_146408310
Related