0

所以我使用 jquery 来访问同一正文中的不同页面。单击 li 空间链接到正确的页面，但是单击 img/icon（包含在 div 中）或文本（包含在 span 中）附近的任意位置会切换到完全空白的页面。建议？

为了便于演示，我将 img div 切换为带边框的框进行放置。额外的 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");
}
4

3 回答 3

1

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

于 2013-05-18T01:15:45.677 回答
1

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

HTML 元素大致有 2 种类型：块级元素和内联元素。例如，块级元素<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>
于 2013-05-18T01:04:28.057 回答
1

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

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

因此，当您单击图像元素时，您将target指向 image而不是 anchor。

代替

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

试试这个

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

或更好

var nextPage = this.hash;
于 2013-05-18T01:04:42.543 回答