Добавить PREV и NEXT на страницу HTML5, использующую IFrame

У меня есть веб-страница HTML5 с iframe в центре ее. Различные загрузки страниц в iframe при щелчке по нумеруемым ссылкам. Эти пронумерованные ссылки находятся на начальной странице HTML5 (ниже тега iframe). Я бы хотел иметь рабочую ссылку PREV и NEXT рядом с пронумерованными ссылками, но не знаю, как это сделать.Добавить PREV и NEXT на страницу HTML5, использующую IFrame

Это то, что я до сих пор:

<div> 
    <nav> 
    <ul> 
     <li class="prev"><a href="#">&laquo; Previous</a></li> 
     <li><a href="news-pg1.html" target="iframe_a">1</a></li> 
     <li><a href="news-pg2.html" target="iframe_a">2</a></li> 
     <li><a href="news-pg3.html" target="iframe_a">3</a></li> 
     <li><a href="news-pg4.html" target="iframe_a">4</a></li> 
     <li><a href="news-pg5.html" target="iframe_a">5</a></li> 
     <li><a href="news-pg6.html" target="iframe_a">6</a></li> 
     <li><a href="news-pg7.html" target="iframe_a">7</a></li> 
     <li class="next"><a href="#">Next &raquo;</a></li> 
    </ul> 
    </nav>

Так что вопрос у меня есть, что я не знаю, как сказать по ссылке ПРЕД, чтобы загрузить предыдущую IFRAME и то же самое для NEXT.

Любая помощь будет оценена по достоинству.

источник

2013-11-20 user3013140

решил это с помощью функции Javascript incrementId() уже нашел, что существует else, где в самом стеке. Я клонировал это и слегка подправил до уменьшения. Эти функции принимают параметр (например: «news-pg1») и приращаются к news-pg2, к которому можно добавить «.html» и так далее, а затем загружает iframe с содержимым html. добавил обработчик события щелчка в список тегов. Добавлены две функции SetPrev и SetNext для обработки кадров нагрузки

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
var f='news-pg1'; 

function newContent()  { 
document.getElementById('fr_content').src =f+ ".html"; 
} 
function decrementId(id)  { 
    // regexp is looking for text with a number suffix. adjust accordingly. 
    var numberSuffixRegExp = /(.*?)(\d*)$/; 
    var regExpMatch = numberSuffixRegExp.exec(id); 
    // assuming a match will be made here, and position 1 and 2 are populated. 
    var prefix = regExpMatch[1]; 
    var counter = parseInt(regExpMatch[2]); 
     if (counter > 1) 
     counter--; 
    return prefix + counter; 
} 

function incrementId(id)  { 
    // regexp is looking for text with a number suffix. adjust accordingly. 
    var numberSuffixRegExp = /(.*?)(\d*)$/; 
    var regExpMatch = numberSuffixRegExp.exec(id); 
    // assuming a match will be made here, and position 1 and 2 are populated. 
    var prefix = regExpMatch[1]; 
    var counter = parseInt(regExpMatch[2]); 
    if (counter  < 3)  { 
     counter++; 
} 
    return prefix + counter; 
} 
function setNext()  { 
try  { 
f=incrementId(f); 
document.getElementById('fr_content').src=f+".html";  
} catch(e)  { 
ErrorHandler.handleError(e); 
} 
} //setNext 
function setPrev()  { 
f=decrementId(f); 
document.getElementById('fr_content').src=f+".html";  
} 
</script> 
<head> 
<body> 
<div> 
    <nav> 
     <iframe id="fr_content" src="news-pg1.html" width=300 height=200> 
     </iframe> 
    <ul style=list-style-type: inline;> 
     <li onclick="setPrev();"> <u>Prev </u> </li> 
     <li onclick="setNext();"> <u>Next </u> </li> 
    </ul> 
    </nav> 
</div> 
</body> 
</html>

источник

2014-11-19 10:25:50 user2862164

Добавить PREV и NEXT на страницу HTML5, использующую IFrame

ответ

Смежные вопросы