how to use <div id="SomeId"></div> for navigation purpose

Question

First of all as per the requirement to create a slider I found following link Reference 1

That I have implemented successfully, but when we started to put asp.net code it started to create problem(s). However I am able to solve many of them but the one where I have trapped up. I want your guidance in this.

Problem: I want to move "Sub Page Content 2" once the user has submitted form1 of Sub page Content 1 automatically. I am able to jump to tab Page2 but not able to move the contents of Sub page Content 1 to the left automatically using jquery.

In order to solve this I have found many threads here, giving solution to move jquery ui tab widget. However I want to understand the code structure written below too.

<div class="main_main_container">
  <div id="linktoPage1">
    <div id="linktoPage2">
        <div id="linktoPage3">
            <div id="linktoPage4">
                <nav> <a href="#linktoPage1">Page1</a><a href="#linktoPage2">Page2</a><a href="#linktoPage3">Page3</a><a 

href="#linktoPage4"></nav>
                <div class="Pages">
                        <div class="page" id="subPage1"> Sub Page Content 1 
            full flag asp.net form1
        </div>  
                        <div class="page" id="subPage2"> Sub Page Content 2
            full flag asp.net form2
         </div>
                        <div class="page" id="subPage3"> Sub Page Content 3 
            full flag asp.net form3
        </div>
                        <div class="page" id="subPage4"> Sub Page Content 4 
            full flag asp.net form4
        </div> 
                </div>  
            </div>
        </div> 
    </div> 
  </div>
</div>

This code is identical to the code defined at Reference 1

In order to understand this code structure I have taken help of following page w3org_site, vanseocom, tympanus_web

At w3org site I have found the following that gave me little help to understand the above html code.

(as described on the w3org)

---

Destination anchors

 <p> <a href="#section1"> History Notes </a>     
    <a href="#section2"> Maths Notes </a>     
    <a href="#section3"> Social Science Notes </a>
         </p>

Method 1:

<H2><A name="section1">History Notes </A></H2>
    ...section 1...
    <H2><A name="section2">Maths Notes </A></H2>
    ...section 2...

or

Method 2:

We may achieve the same effect by making the header elements themselves the anchors:

<H2 id="section1">History Notes </A></H2>
    ...section 1...
    <H2 id="section2">Maths Notes </A></H2>
    ...section 2...

Now this description made me confuse regarding the code described on w3org because it is totally different code than the described at Reference 1 site.

why they are not using #character to direct(send) the user to the description of link History Notes. And why in the code on the Reference 1 author have written like <div id="linktoPage1"> and writing <a href="#linktoPage1"> inside/nesting within <div id="linktoPage4">

This is a special type of cssistry (chemistry) here that I am not able to grasp.

I am hoping once i would be able to understand the above cssistry I am going to find answer of following question. It has described above also.

author is using css way to direct the user to specified location. then how we can perform the same using jquery. I meant how we ll able to write equivalent code of #linktoPage1:target .page(left:-100%); using jquery.

Thanks!

Answer 1

The tabbed menu you're using is designed so that it's not possible to select a tab with JS.

The menu works so, that all the elements are wrapped inside three wrappers, one of which is targeted by clicking on a link. The pages are given styling based on which wrapper element was targeted. The problem is that you can't target an element using JS, which is why you can't select a tab using JS with your current code.

But don't worry, that's a bad way to do CSS-only tabs anyway. If you do it the way shown in the tutorial you referred to, none of the tabs appear to be selected initially before the user clicks on one of the tabs. Also, it requires a lot of excess markup.

I suggest you use radio buttons instead (if you want the tab menu navigation to work purely with CSS despite using JS for some other things anyway). The advantages of using radio buttons:

• you can use JS to select a tab with element.checked=true;
• you can have one of the tabs pre-selected with the checked attribute
• there's much less markup cluttering your HTML
• still pure CSS solution

I already created a function tab() which you can use to select one of the tabs. For instance, tab(3) would select the third tab.

I tried to go into as much detail as I could in the comments of the code below. But I understand that it requires quite a good knowledge of CSS selectors to fully comprehend, so ask if something's unclear.

/*
With the following function you can select a tab to be displayed:
tab(1) selects the first tab for instance.
*/
function tab(number){
    var elems=document.getElementsByTagName("input"), navs=[];
    for(var i=0;i<elems.length;i++) if(elems[i].getAttribute("name")=="nav") navs.push(elems[i]);
    navs[number-1].checked=true;
}

body {
    overflow-x: hidden;
    font-family: sans-serif;
    text-align: center;
}
/* 
You can select input elements whose name attribute is "nav" using 
the [attribute=value] selector to select all our radio buttons
that'll become the tabs:
*/
input[name=nav]{ 
    width: calc(100% / 3); /* third of the screen width */
    height: 40px;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    z-index: 2; /* this is so the ::before pseudo elements would be on top of the pages */
}
/*
To give separate styling for the second and the third tabs, you can use
the same selector again to target them specifically:
*/
input[value=i2]{
    left:calc(100% / 3);
}
input[value=i3]{
    left:calc(200% / 3);
}
/* 
Radio buttons can't be styled, but the trick is to create an ::after
pseudo element and place it on top of the radio button. When the user
clicks on a pseudo element, it activates its parent selecting it. So,
in a nutshell, give the ::after pseudo element the styles you would for
the radio button. 
*/
input[name=nav]::after{
    content: attr(data-title); /* Display the value of the data-title attribute inside the element. */
    display: block;
    position: absolute;
    top: 0; left: 0; /* Position it on top of its parent */
    width: 100%; height: 100%; /* Make it the size as its parent */
    padding: 5px;
    background-color: #111;
    cursor: pointer;
    font: 2em/1 helvetica, arial;
    font-weight: bold;
    color: #aaa;
    text-align: center;
    box-sizing: border-box;
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    transition: background 1s;
}
input[name=nav]:hover::after{ /* styling when hovering */
    background-color: #444;
}
input[name=nav]:checked::after{ /* styling when the tab is selected */
    background-color: red;
    color: #fff;
}
/*
Now the ::after pseudo elements are enough for the tabs to work, but if
you want to have the back and forward buttons, you should create these
::before pseudo elements also. They work with the same idea. This time however,
their position is fixed so they can be placed on top of the pages.

Of course the back and forward buttons should only appear for tabs that 
aren't currently selected, for which you can use  the :not(:checked) selector:
*/
input[name=nav]:not(:checked)::before{
    content: '';
    display: block;
    position: fixed;
    top: 40px;
    left: 0;
    height: calc(100vh - 40px);
    width: 50vw;
}
input[value=i1]:not(:checked)::before{
    width:100vw;
}
input[value=i1]:checked ~ input[value=i3]::before{
    left:0;
}
input[value=i1]:checked ~ input[value=i2]::before{
    left:50vw;
}
input[value=i2]:checked ~ input[value=i3]::before{
    left:50vw;
}
.pages{
    position: fixed;
    z-index:1;
    top: 40px;
    left: 0;
    height: calc(100% - 40px);
    width: 100%;
    -webkit-transition: left 0.8s;
    -moz-transition: left 0.8s;
    transition: left 0.8s;
}
.page{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
.page#1 {
    background-color: #bbb;
    left: 0;
}
.page#i2 {
    background-color: #ccc;
    left: 100%;
}
.page#i3 {
    background-color: #ddd;
    left: 200%;
}
/*
Finally, use the "after" ~ selector to determine which page to show. The idea here is 
that we first match which of the radio buttons are selected and then look for a .pages
element that follows it. This is the reason you shouldn't wrap the navigation elements
 - they need to be on the same level in the DOM tree.

So, for instance if the first tab is selected, then input[value=i1]:checked is matched
and we can style the .pages element with the ~ selector because it comes after the 
matched radio button in the DOM tree.
*/
input[value=i1]:checked ~ .pages {
    left: 0%;
}
input[value=i2]:checked ~ .pages {
    left: -100%;
}
input[value=i3]:checked ~ .pages {
    left: -200%;
}

<!-- This is the navigation. It needs to be on the same level as 
the pages in the DOM tree for the ~ selector to work, so don't 
wrap it. Put the title you want displayed in the data-title
attribute. -->
<input type="radio" name="nav" value="i1" data-title="Tab 1" checked>
<input type="radio" name="nav" value="i2" data-title="Tab 2">
<input type="radio" name="nav" value="i3" data-title="Tab 3">
<!-- And here are your pages: -->
<div class="pages">
    <div id="i1" class="page">
        <h1>Slide 1</h1>
    </div>
    <div id="i2" class="page">
        <h1>Slide 2</h1>
    </div>
    <div id="i3" class="page">
        <h1>Slide 3</h1>
    </div>
</div>