如何使用<div id =“SomeId”> </div>进行导航

Question

首先，根据创建滑块的要求，我在链接Reference 1

后找到了

我已成功实施，但当我们开始使用asp.net代码时，它开始创建问题。但是我能够解决其中许多问题，但是我已经陷入困境。我想要你的指导。

问题：一旦用户自动提交了子页面内容1的form1，我想移动“子页面内容2”。 我可以跳转到标签页面2，但无法使用jquery自动将子页面内容1的内容向左移动。

为了解决，我在这里找到了很多线程，为移动jquery ui tab小部件提供了解决方案。但是我想了解下面编写的代码结构。

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

此代码与Reference 1

中定义的代码相同

为了理解这个代码结构，我已经采取了以下页面的帮助  w3org_site, vanseocom，tympanus_web

在w3org网站，我发现以下内容对理解上述HTML代码没什么帮助。

  

（如w3org所述）

目的地锚点

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

  

方法1：

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

或

  

方法2：

我们可以通过使标题元素本身成为锚点来实现相同的效果：

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

现在，此描述让我对w3org中描述的代码感到困惑，因为它与Reference 1网站上描述的代码完全不同。

为什么他们没有使用#字符将用户定向（发送）到链接历史记录说明。 为什么在Reference 1作者的代码中写了<div id="linktoPage1">并在<a href="#linktoPage1">内写/ <div id="linktoPage4">

这是一种特殊类型的 cssistry （化学），我无法理解。

我希望一旦我能够理解上述 cssistry 我将找到以下问题的答案。它也在上面描述过。

作者正在使用css方式将用户定向到指定位置。然后我们如何使用jquery执行相同的操作。我的意思是我们如何使用#linktoPage1:target .page(left:-100%);编写jquery的等效代码。

谢谢！

Answer 1

您正在使用的标签式菜单的设计使得无法选择带有JS的标签页。

菜单的工作原理是，所有元素都包含在三个包装器中，其中一个包装器通过单击链接进行定位。根据目标包装元素给出页面样式。问题是你不能target一个使用JS的元素，这就是为什么你不能用你当前的代码选择一个使用JS的标签。

但不要担心，无论如何，这只是制作纯CSS标签的一种坏方法。如果按照所引用教程中显示的方式执行此操作，则在用户单击其中一个选项卡之前，似乎没有选中任何选项卡。此外，它需要大量过多的标记。

我建议您使用radio buttons代替（如果您希望标签菜单导航纯粹使用CSS，尽管无论如何都要使用JS进行其他操作）。使用radio buttons：

的优势

• 您可以使用JS选择包含element.checked=true;
的标签
• 您可以使用checked属性
预先选择其中一个标签
• 标记混乱的HTML
• 仍然是纯CSS解决方案

我已经创建了一个函数tab()，您可以使用它来选择其中一个标签。例如，tab(3)会选择第三个标签。

我尝试在下面的代码评论中尽可能详细地介绍。但是我明白它需要很好的CSS选择器知识才能完全理解，所以问一下是否有些不清楚。

＆＃13;

＆＃13;

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

＆＃13;

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%;
}

＆＃13;

<!-- 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>

＆＃13;

＆＃13;

＆＃13;