我正在尋找一種解決方案，讓上一個和下一個箭頭可以循環瀏覽鏈接。與下面的鏈接類似，但是當您點擊上一個或下一個時，您會轉到導航li中的下一個錨點並加載新頁面。上一頁/下一頁導航鏈接按鈕

<div id="nav" class="text-spacing"> 
    <ul id="nav"> 
    <li><a href="/news.html" class="nav-button">News</a></li> 
    <li><a href="/tourdates.html" class="nav-button">Tour Dates</a></li> 
    <li><a href="/music.html" class="nav-button navSelected">Music</a></li> 
    <li><a href="/video" class="nav-button">Video</a></li> 
    <li><a href="/about" class="nav-button">About</a></li> 
    <li><a href="/contact" class="nav-button">Contact</a></li> 
    </ul> 
</div> 

<div id="arrow-left" class="slide-right"><a href="#" class="prev-button" title="Previous"><img src="images/arrow-left.png" alt="Left Arrow" width="25" height="48"></a></div> 
<div id="arrow-right" class="slide-left"><a href="#" class="next-button" title="Next"><img   src="images/arrow-right.png" alt="Right Arrow" width="25" height="48"></a></div 

$(document).ready(function() { 
    $('.next-button').click(function() { 
     var $el = $('#nav li a.navSelected').removeClass('navSelected'); 
     var $next = $el.parent().next(); 

     if ($next.length == 0) $next = $('#nav li:first'); 

     $next.find('a.nav-button').addClass('navSelected'); 
    }); 


    $('.prev-button').click(function() { 
     var $el = $('#nav li a.navSelected').removeClass('navSelected'); 
     var $prev = $el.parent().prev(); 

     if ($prev.length == 0) $prev = $('#nav li:last'); 

     $prev.find('a.nav-button').addClass('navSelected'); 
    }); 
});

http://jsfiddle.net/Zevan/H2hjr/

首頁 |音樂|視頻|聯繫

來源

2013-08-02 user1178780

你如何期待這個加載新的頁面？ –

但是你的小提琴有不同的代碼，沒有錨點。爲什麼不更新它，至少包含帶錨的html，即使你無法讓JS以你想要的方式工作。另外，假設你的示例html非常短（並且在你添加錨後仍然會），你應該直接將它包含在問題中（除了小提琴）。 – nnnnnn

我不太流利的JavaScript。我看到這段代碼通過更改類來循環訪問我的導航鏈接。我很喜歡點擊右側和左側箭頭進入導航中的下一個鏈接並加載它。那可能嗎？ – user1178780

你可以抓住的href出你的鏈接，並用它來觸發window.location.href像這樣：

$(document).ready(function() { 
    $('.next-button').click(function() { 
     var $el = $('#nav li a.navSelected').removeClass('navSelected'); 
     var $next = $el.parent().next(); 

     if ($next.length == 0) $next = $('#nav li:first'); 

     $next.find('a.nav-button').addClass('navSelected'); 

     // Added window.location.href to follow the selected links href 
     window.location.href = $next.find('a.nav-button').attr('href'); 
    }); 


    $('.prev-button').click(function() { 
     var $el = $('#nav li a.navSelected').removeClass('navSelected'); 
     var $prev = $el.parent().prev(); 

     if ($prev.length == 0) $prev = $('#nav li:last'); 

     $prev.find('a.nav-button').addClass('navSelected'); 
     // Added window.location.href to follow the selected links href 
     window.location.href = $prev.find('a.nav-button').attr('href'); 

    }); 
});

來源

2013-08-02 22:07:26 putvande

令人驚歎！非常感激！ – user1178780

非常歡迎您。如果這可以幫助你，你可以接受這個答案。謝謝 – putvande

其實，這是由於某種原因在第一個和最後一個鏈接之間循環。任何想法爲什麼？ – user1178780

上一頁/下一頁導航鏈接按鈕

回答

相關問題