jquery - 如何使用 进行导航

Question

首先，根据创建 slider 的要求，我找到了以下链接 Reference 1

我已经成功实现，但是当我们开始放置 asp.net 代码时，它开始产生问题。然而，我能够解决其中的许多问题，但我被困的问题除外。我需要你的指导。

问题:一旦用户自动提交了子页面内容 1 的表单 1，我想移动“子页面内容 2”。我能够跳转到选项卡 Page2，但无法使用 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 代码帮助不大。

(as described on the w3org)

---

目标 anchor

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

或

Method 2:

我们可以通过将标题元素本身作为 anchor 来达到相同的效果:

<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 选择选项卡。

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

但别担心，无论如何，这对于仅使用 CSS 的选项卡来说是一种糟糕的方式。如果您按照您提到的教程中所示的方式进行操作，则在用户单击其中一个选项卡之前，最初似乎没有选择任何选项卡。此外，它需要大量的额外标记。

我建议您改用 radio buttons(如果您希望选项卡菜单导航完全使用 CSS，尽管无论如何都使用 JS 进行其他操作)。使用单选按钮的优点:

• 您可以使用 JS 来选择带有 element.checked=true; 的选项卡
• 您可以使用 checked 属性预先选择其中一个选项卡
• 使 HTML 困惑的标记要少得多
• 仍然是纯 CSS 解决方案

我已经创建了一个函数 tab()，您可以使用它来选择其中一个选项卡。例如，tab(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>