javascript - 遍历 DOM 以根据每个 anchor 显示单独的内容

Question

我正在编写一些代码以从相关链接中淡出切换信息。因为我想显示内容所以它不会隐藏 anchor 。有谁知道是否有办法提升 DOM 并根据每个 anchor 显示单独的内容？我的代码显示它上升到 DOM。我正在努力使用下面的 jsfiddle 代码让它工作。

http://jsfiddle.net/g1mn79td/

<div class="info">
    <p>South Korea</p>
    <p>South Korea is known globally for its thriving energy industry, providing a large number of overseas employment opportunities. The majority of foreign nationals make themselves at home in the larger cities such as Seoul, Busan and Incheon. If you’ve found a great role in South Korea, then follow the link to find out more about what you’ll need to think about when moving yourself or your family to this fascinating country.</p>
</div>
<div class="info">
    <p>Angola</p>
    <p>As one of the largest countries in southern Africa, Angola has great natural resources in oil, diamonds, gold and copper. Portuguese is the most commonly spoken language in Angola so learning some of the basics can be instrumental in helping you get by. The prospect of moving yourself and even your family to a new country can be overwhelming with many elements to think about when planning your relocation. All of this information and more is available in this guide.</p>
</div>
<div class="t">
    <div class="tc rel">
        <div class="book" id="book">
            <div class="page cover"></div>
            <div class="page two">
                <div class="block">
                     <h1>passport</h1>
                     <a href="https://github.com/blasten/turn.js" class="tip">click</a>
                </div>
            </div>
            <div class="page three">
                <div class="block">
                     <h1>passport</h1>
 <a href="https://github.com/blasten/turn.js">click</a>

                </div>
            </div>
        </div>
    </div>
</div>

html, body {
    margin: 0;
    height: 100%;
}
body {
    background-color: #333;
}
body.hide-overflow {
    overflow: hidden;
}
/* helpers */
 .t {
    display: table;
    width: 100%;
    height: 100%;
}
.tc {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.rel {
    position: relative;
}
/* book */
 .book {
    margin: 0 auto;
    width: 90%;
    height: 90%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    top: 140px;
}
.book .page {
    height: 100%;
    float: left;
}
.book .cover {
    background:white url(pages/1.jpg) no-repeat;
    background-size:cover;
}
.book .two {
    background:url(pages/2.jpg) no-repeat;
    background-size:cover;
}
.book .three {
    background:url(pages/3.jpg) no-repeat;
    background-size:cover;
}
.book .page img {
    max-width: 100%;
    height: 100%;
}
.block {
    background:red;
    width:50%;
    height:50%;
    display:block;
    margin:60px auto;
    padding:10%;
    overflow:hidden;
}
.green {
    background:green;
}
body .info {
    background: none repeat scroll 0 0 white;
    height: auto;
    margin: 30px;
    position: absolute;
    width: 80%;
    z-index: 1;
    display:none;
    padding:10px
}
body .info p {
    font-size:15px;
    line-height:20px
}

var $findtip = $('.page');

$findtip.find('a').on('mouseenter mouseleave', function () {
    var $link = $(this);
    $(this).parents().eq(7).find('.info').fadeToggle();

});

Answer 1

http://jsfiddle.net/g1mn79td/6/

var o;
$('.page a').on('mouseenter mouseleave',function(){
    o = $(this).parent().parent().index();
    i = parseInt(o) - 1;
    $('body').find('.info').eq(i).fadeToggle();
});