1

我有这个 HTML 结构：

<body>
<div id="content" class="clearfix">
    <!-- Page 1 -->
    <div>
        <div class="description"><h2>Apolonija, zubarska ordinacija</h2><p>Nesto u vezi Apolonija zubarske ordinacije ce biti detaljno ispisano na ovom mjestu razlicito za svaki tab. Takodje moguce je dodati sliku kao sto je na slici dizajna.</p></div>
        <img src="content/images/ordinacija1.jpg" />
    </div>

    <!-- Page 2 -->
    <div>
        <div class="description"><h2>Apolonija, zubarska ordinacija</h2><p>Nesto u vezi Apolonija zubarske ordinacije ce biti detaljno ispisano na ovom mjestu razlicito za svaki tab. Takodje moguce je dodati sliku kao sto je na slici dizajna.</p></div>
        <img src="content/images/ordinacija2.jpg" />
    </div>

    <!-- Page 3 -->
    <div>
        <div class="description"><h2>Apolonija, zubarska ordinacija</h2><p>Nesto u vezi Apolonija zubarske ordinacije ce biti detaljno ispisano na ovom mjestu razlicito za svaki tab. Takodje moguce je dodati sliku kao sto je na slici dizajna.</p></div>
        <img src="content/images/ordinacija3.jpg" />
    </div>

    <!-- Page 4 -->
    <div>
        <div class="description"><h2>Apolonija, zubarska ordinacija</h2><p>Nesto u vezi Apolonija zubarske ordinacije ce biti detaljno ispisano na ovom mjestu razlicito za svaki tab. Takodje moguce je dodati sliku kao sto je na slici dizajna.</p></div>
        <img src="content/images/ordinacija4.jpg" />
    </div>
</div>
<div id="navigation" class="clarfix">
    <div id="accordion">
        <!-- 1st header and pane -->
        <img src="horisontalTabsAccordion/images/button1.jpg" />
        <div style="width: 250px; display:block"><h3>Apolonija, zubarska ordinacija</h3><p>Nesto pise malo vise malo manje :)</p></div>

        <!-- 2nd header and pane -->
        <img src="horisontalTabsAccordion/images/button2.jpg" />
        <div><h3>Apolonija, zubarska ordinacija</h3><p>Nesto pise malo vise malo manje :)</p></div>

        <!-- 3rd header and pane -->
        <img src="horisontalTabsAccordion/images/button3.jpg" />
        <div><h3>Apolonija, zubarska ordinacija</h3><p>Nesto pise malo vise malo manje :)</p></div>

        <!-- 4th header and pane -->
        <img src="horisontalTabsAccordion/images/button4.jpg" />
        <div><h3>Apolonija, zubarska ordinacija</h3><p>Nesto pise malo vise malo manje :)</p></div>
    </div>
    <div id="buttons">
        <a href="#" class="btn-prev"><div class="previous-icon"></div></a>
        <a href="#" class="btn-next"><div class="next-icon"></div></a>
    </div>
</div>

<script type="text/javascript">
    $("#accordion").tabs("#accordion div", {
      tabs: 'img',
      effect: 'horizontal'
    });
</script>

我使用这个 JavaScript 的： buttons.js：

var currentTab = null;
var choosenTab = null;

function bindTabs() {
// Set current tab variable when image is clicked
$('#accordion img').each(function() {
    $(this).bind('click', function() {
        currentTab = $(this);
    });
    });
}

function bindNext() {
$('.btn-next').bind('click', function(){ 
     choosenTab = currentTab.nextUntil('img').next();

     if (choosenTab.length != 0) { // Next image tag found
         choosenTab.get(0).click();
         currentTab = choosenTab;
     }
     return false;
});
}

function bindPrevious() {
$('.btn-prev').bind('click', function(){
    choosenTab = currentTab.prevUntil('img').prev();

    if (choosenTab.length != 0) { // Previous image tag found
        choosenTab.get(0).click();
        currentTab = choosenTab;
    }

    return false;
});
}

$(document).ready(function(e) {
currentTab = $('#accordion').find('img.current');

bindTabs();
bindPrevious();
bindNext();
});

和pager.js：

var currentPageIndex = 0;
var currentPage = null;
var choosenPage = null;

function setCurrentPage() {
currentPage = $('#content > div:first-child');
}

function setInitialCurrentPage() {
$('#content > div:first-child').addClass("currentPage");
setCurrentPage();
choosenPage = currentPage;
}

function addRemoveCurrentPageClass() {
choosenPage.addClass('currentPage');
currentPage.removeClass('currentPage');
}

function preparePrevButton() {
$('.btn-prev').bind('click', function() {
    setCurrentPage();
    choosenPage = currentPage.prevUntil('div').prev();
    console.log(choosenPage); // Always is null

    if (choosenPage.length != 0) {
        addRemoveCurrentPageClass();
        currentPage = choosenPage;
    }
    return false;
});
}

function prepareNextButton() {
$('.btn-next').bind('click', function() {
    setCurrentPage();
    choosenPage = currentPage.nextUntil('div').next();
    console.log(choosenPage); // Always is null

    if (choosenPage.length != 0) {
        addRemoveCurrentPageClass();
        currentPage = choosenPage;
    }
    return false;
});
}

function prepareNavButtons() {
preparePrevButton();
prepareNextButton();
}

function prepareAcordionTabs() {

}

$(document).ready(function(e) {
    setInitialCurrentPage();
prepareNavButtons();
prepareAcordionTabs();
});

当我想查找当前 div 的下一个或上一个 div 时，就会出现问题。当前 div 是具有“currentPage”类的 div。

如果有人想拥有所有源代码，可以使用 Mercurial 并从 Google 代码中提取数据。谷歌代码项目网站是：https ://code.google.com/p/apolonia-slide-pager/

4

0 回答 0