首先,根据创建滑块的要求,我在链接参考1中找到了
我已经成功实现了,但是当我们开始使用asp.net代码时,它开始创建问题.但是我能够解决其中许多问题,但是我已经陷入困境.我想要你的指导.
问题:一旦用户自动提交了子页面内容1的form1,我想移动"子页面内容2".我可以跳转到标签页面2,但无法使用自动将子页面内容1的内容向左移动jquery.
为了解决这个问题,我在这里找到了许多线程,为移动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>
此代码与参考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(化学)在这里,我不能够把握.
我希望,一旦我能够理解上述问题,我将找到以下问题的答案.它也在上面描述过.
作者正在使用css方式将用户定向到指定位置.然后我们如何使用jquery执行相同的操作.我的意思是我们将如何编写#linktoPage1:target .page(left:-100%);使用的等效代码jquery.
谢谢!
Okk*_*kku 13
您正在使用的选项卡式菜单的设计使得无法选择带有JS的选项卡.
菜单的工作原理是,所有元素都包含在三个包装器中,其中一个包装器通过单击链接进行定位.根据目标包装元素给出页面样式.问题是你不能target使用JS元素,这就是为什么你不能用你当前的代码选择使用JS的标签.
但不要担心,无论如何,这是一个不用做CSS选项卡的坏方法.如果按照所引用教程中显示的方式执行此操作,则在用户单击其中一个选项卡之前,似乎没有选中任何选项卡.此外,它需要大量过多的标记.
我建议你使用radio buttons(如果你想让标签菜单导航纯粹用CSS工作,尽管无论如何都要用JS做其他事情).使用的优点radio buttons:
element.checked=true;checked属性预先选择其中一个选项卡我已经创建了一个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>