だから私は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");
}