jquery – 如何用于导航目的

菜单的工作原理是，所有的元素都包含在三个包装器中，其中一个是通过点击一个链接来定位的。这些页面是基于哪个包装元素被定位的样式。问题是您无法使用JS定位元素，这就是为什么您无法使用JS与当前代码选择标签。

但不用担心，这样做只是CSS的选项卡的一个糟糕的方法。如果按照您所引用的教程中所示的方式执行此操作，则在用户单击其中一个选项卡之前，最初没有选项卡被选中。此外，它需要大量的额外标记。

我建议您使用单选按钮(如果您希望标签菜单导航纯粹使用CSS工作，尽管使用JS的其他一些事情)。使用单选按钮的优点：

>你可以使用JS来选择一个选项卡，使用element.checked = true;
>您可以使用checked属性预先选择一个选项卡
>你的HTML的标记越来越少了
>仍然是纯CSS的解决方案

我已经创建了一个功能选项卡()，您可以使用它来选择一个选项卡。例如，选项卡(3)将选择第三个选项卡。

我试图在下面的代码的注释中尽可能多的细节。但是我明白，CSS选择器需要很好的了解才能充分理解，所以问问题是不清楚的。

/*
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>