Jquery分页-嵌套在href 't中的元素链接到正确的页面

jquery paging - elements nested in href don't link to correct pages

本文关键字：链接 元素 嵌套 分页 href Jquery      更新时间：2023-09-26

所以我使用jquery访问同一主体内的不同页面。单击li空间链接到正确的页面，但是单击img/图标(包含在div中)或文本(包含在span中)附近的任何位置将切换到完全空白的页面。建议吗?

为了便于演示，我将imgdiv切换为一个有边框的方框来放置。额外的js用于动画，我也删除了为了保持这个小一点。

小提琴链接:http://jsfiddle.net/nL4D6/

提前感谢!

HTML 

<div id="wrapper">
    <div id="content">
        <div id="pages">
            <div id="page1" class="current">
            <p>page 1</p>
            </div>
            <div id="page2">
            <p>page 2</p>
            </div>
            <div id="page3">
            <p>page 3</p>
            </div>
        </div>
</div>
</div>
<footer>
    <ul id="tab-bar">
        <li>
            <a href="#page1"><div id="img1"></div><span>Page1</span></a>
        </li>
        <li>
            <a href="#page2"><div id="img2"></div><span>Page2</span></a>
        </li>
        <li>
            <a href="#page3"><div id="img3"></div><span>Page3</span></a>
        </li>
    </ul>
</footer>
CSS 

#wrapper
{
position:absolute;
z-index:1;
top:45px;
bottom:48px;
width:100%;
overflow:auto;
}
#content {
position:absolute;
z-index:1;
width:100%;
padding:0;
}
#pages
{
position: relative;
}
#pages > div
{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#pages > div.current
{
display: block;
}
#tab-bar
{
margin: 0;
padding: 0;
position: fixed;
bottom: 0;
width: 100%;
z-index: 900;
}
#tab-bar li
{
display: inline;
float: left;
border-left: 1px solid #000000;
width: 33.333%
}
#img1
{
display: block;
position: relative;
margin: 0 auto 2px auto;
background-color: #ffffff;
border: 1px solid blue;
width: 32px;
height: 32px;
opacity: 0.5;
}
#img2
{
display: block;
position: relative;
margin: 0 auto 2px auto;
background-color: #ffffff;
border: 1px solid blue;
width: 32px;
height: 32px;
opacity: 0.5;
}
#img3
{
display: block;
position: relative;
margin: 0 auto 2px auto;
background-color: #ffffff;
border: 1px solid blue;
width: 32px;
height: 32px;
opacity: 0.5;
}
#tab-bar a
{
color: #ffffff;
background: #ab1b1b;
display: block;
font-weight: bold;
overflow: hidden;
position: relative;
text-align: center;
font-size: 0.9em;
text-decoration: none;
padding: 6px 0 2px 0;
-webkit-touch-callout: none;
}
#tab-bar a:hover
{
background: #d43333;
}
#tab-bar a:hover > #img1,
#tab-bar a:hover > #img2,
#tab-bar a:hover > #img3
{
opacity: 1;
}

JS 

$('#tab-bar a').on('click', function(e){
    e.preventDefault();
    var nextPage = $(e.target.hash);
    page(nextPage); //You need to add this for it to work
    $("#pages .current").removeClass("current");
    nextPage.addClass("current");
})
function page(toPage) {
    var toPage = $(toPage),
            fromPage = $("#pages .current");
    if(toPage.hasClass("current") || toPage === fromPage) {
        return;
    };
    toPage.addClass("current fade in").one("webkitAnimationEnd", function(){
        fromPage.removeClass("current fade out");
        toPage.removeClass("fade in")
    });
    fromPage.addClass("fade out");
}

您的方法的问题是使用$(e.target.hash)

target总是对应于被点击的元素。currentTarget对应绑定到的元素。

所以当你点击图像元素时，你的target指向图像而不是锚。

代替

var nextPage = $(e.target.hash);

试试这个

var nextPage = $(e.currentTarget.hash);

或更好的

var nextPage = this.hash;

简短的回答:你不能把<div>放在<a>里面。

HTML元素大致有两种类型:块级元素和内联元素。块级元素例如<div>。内联元素为<span> <strong> <a> <p>等。

现在逻辑上你可以在块级元素中嵌套块级元素，在内联元素中嵌套内联元素，并且你可以在块级元素中嵌套级别内联元素。但是不能在内联元素中嵌套块级元素。

你的浏览器可能会分裂你的HTML。所以:

<a href="link">text1<div>text2</div>text3</a>

就变成:

<a href="link">text1</a><div>text2</div><a ??>text3</a>

因为您使用的是jQuery，所以您可以简单地使用var nextPage = $( this.hash );而不是e.target.hash。

相关文章：