Открытие странички во фрейме из списка

@raindew · Регистрация: 28.10.2015

Студворк — интернет-сервис помощи студентам

Доброго времени, Добрые люди!
С jquery знаком совсем недавно, да и js знаю на уровне первоклашки и потому, прошу помощи у Вас, дорогие Эксперты.

Помогите, пожалуйста, реализовать скрипт, который бы открывал из некого списка (ul), при нажатии на ссылку из этого списка, страничку во фрейме, а так же, пролистывал бы эти страницы при помощи кнопок "Следующая" и "Предыдущая", переключая, вместе с этим, и ссылки из списка, по порядку.

Есть одна реализиация похожего скрипта, но он весьма неудобен, вот пример: http://excrywor.xyz
В этом примере к каждой ссылке подставляется специальная подставка: onclick="jump(0)" - можно ли обойтись без нее? Так же, нужно добавлять ссылки в сам скрипт - можно ли обойтись без этого добавления?

@alexsamos33 · 30.10.2015, 08:31

HTML5
1
2
3
4
5
<div>
<button id="prevBtn">Prev</button>
<button id="nextBtn">Next</button>
</div>
<div id="frame_inner"></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
window.onload=function(){
var i=0;
var urls = new Array("http://example.org/#/another/any/site/page.html", "https://www.cyberforum.ru/", "http://www.cyberguru.ru/");
var prev=document.getElementById("prevBtn");
var next=document.getElementById("nextBtn");
prevBtn.onclick=prevSite;
nextBtn.onclick=nextSite;
function goFrame(u){
var dv=document.getElementById("frame_inner");
dv.innerHTML="<iframe src='"+u+"'></iframe>";
}
function prevSite(){
i--;
if(i<0)i=urls.length-1;
goFrame(urls[i]);
}
function nextSite(){
i++;
if(i>urls.length)i=0;
goFrame(urls[i]);
}
window.setTimeout(function(){goFrame(urls[i]);}, 500);
};

Добавлено через 3 минуты
http://jsfiddle.net/3m2rasrs/

@raindew · 30.10.2015, 12:20 **[ТС]**

Все Здорово, кнопки работают, спасибо!

Но, сайтов может быть гораздо больше, примерно от 100 и потому, все их добавлять в скрипт, наверное, не очень хорошая идея. Может быть можно сделать так, чтобы их можно было добавлять посредством <ul> <li> <a>? и +, чтобы подставлялся некий class .active при выбранном сайте, как это реализовано тут: http://excrywor.xyz
Было бы вообще супер!

@alexsamos33 · 31.10.2015, 17:42

HTML5
1
2
3
4
5
6
7
8
9
10
<div>
<button id="prevBtn">Prev</button>
<button id="nextBtn">Next</button>
</div>
<div><ul id="links_list">
<li><a href="http://example.org/">Пример1</a></li>
<li><a class="active" href="http://cyberforum.ru/">Форум</a></li>
<li><a href="http://example.com/ss">Пример2</a></li>
</ul></div>
<div id="frame_inner"></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function goFrame(u){
$("div#frame_inner").html('<iframe src="'+u+'"></iframe>');
}
$(function(){
goFrame( $("ul#links_list li a.active").attr("href") );
$("ul#links_list li a").click(function(){
goFrame( $(this).attr("href") );
$("ul#links_list li a").removeClass("active");
$(this).addClass("active");
return false;
});
$("#prevBtn").click(function(){
$("ul#links_list li a.active").parent().prev().find("a").trigger("click");
});
$("#nextBtn").click(function(){
$("ul#links_list li a.active").parent().next().find("a").trigger("click");
});
});

Добавлено через 2 минуты
http://jsfiddle.net/95f918md/

@raindew · 31.10.2015, 20:25 **[ТС]**

alexsamos33, Вы Гений!) Но мне бы еще пару моментов допилить)

@alexsamos33 · 31.10.2015, 20:40

raindew, так?
http://jsfiddle.net/4f9ptj90/

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div>
<button id="prevBtn">Prev</button>
<button id="nextBtn">Next</button>
</div>
<div id="countlinks"></div>
<div><ul id="links_list">
<li class="active"><a href="http://example.org/">Пример1</a></li>
<li><a href="http://cyberforum.ru/">Форум</a></li>
<li><a href="http://example.com/ss">Пример2</a></li>
</ul></div>
<div id="frame_inner"></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var current_lnk = 0, count_all_links= 0;
function goFrame(u){
count_all_links= $("ul#links_list li").length;
current_lnk = 1;
$("ul#links_list li").each(function(){
if($(this).hasClass("active")){ return false; }
current_lnk +=1;
return true;
});
$("#countlinks").text( current_lnk+" / "+count_all_links );
$("div#frame_inner").html('<iframe src="'+u+'"></iframe>');
}
$(function(){
goFrame( $("ul#links_list li.active a").attr("href") );
$("ul#links_list li a").click(function(){
$("ul#links_list li").removeClass("active");
$(this).parent().addClass("active");
goFrame( $(this).attr("href") );
return false;
});
$("#prevBtn").click(function(){
$("ul#links_list li.active").prev().find("a").trigger("click");
});
$("#nextBtn").click(function(){
$("ul#links_list li.active").next().find("a").trigger("click");
});
});

CSS
1
2
3
4
li { list-style: none; }
ul#links_list li.active:before {
content: "*";
}

@raindew · 31.10.2015, 22:22 **[ТС]**

alexsamos33, Да! Это именно то, что мне было нужно! Слушай, а можно ли сделать так, чтобы кнопки могли перелистывать ссылки не только внутри 1-го списка ul, но и в нескольких?

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@raindew 0 / 0 / 0 Регистрация: 28.10.2015 Сообщений: 16

	Открытие странички во фрейме из списка 28.10.2015, 20:48. Показов 1144. Ответов 6 Метки нет (Все метки) Доброго времени, Добрые люди! С jquery знаком совсем недавно, да и js знаю на уровне первоклашки и потому, прошу помощи у Вас, дорогие Эксперты. Помогите, пожалуйста, реализовать скрипт, который бы открывал из некого списка (ul), при нажатии на ссылку из этого списка, страничку во фрейме, а так же, пролистывал бы эти страницы при помощи кнопок "Следующая" и "Предыдущая", переключая, вместе с этим, и ссылки из списка, по порядку. Есть одна реализиация похожего скрипта, но он весьма неудобен, вот пример: http://excrywor.xyz В этом примере к каждой ссылке подставляется специальная подставка: onclick="jump(0)" - можно ли обойтись без нее? Так же, нужно добавлять ссылки в сам скрипт - можно ли обойтись без этого добавления? 0

@raindew 0 / 0 / 0 Регистрация: 28.10.2015 Сообщений: 16
	30.10.2015, 12:20 [ТС]
	Все Здорово, кнопки работают, спасибо! Но, сайтов может быть гораздо больше, примерно от 100 и потому, все их добавлять в скрипт, наверное, не очень хорошая идея. Может быть можно сделать так, чтобы их можно было добавлять посредством <ul> <li> <a>? и +, чтобы подставлялся некий class .active при выбранном сайте, как это реализовано тут: http://excrywor.xyz Было бы вообще супер! 0

@raindew 0 / 0 / 0 Регистрация: 28.10.2015 Сообщений: 16
	31.10.2015, 20:25 [ТС]
	alexsamos33, Вы Гений!) Но мне бы еще пару моментов допилить) 0

@raindew 0 / 0 / 0 Регистрация: 28.10.2015 Сообщений: 16
	31.10.2015, 22:22 [ТС]
	alexsamos33, Да! Это именно то, что мне было нужно! Слушай, а можно ли сделать так, чтобы кнопки могли перелистывать ссылки не только внутри 1-го списка ul, но и в нескольких? 0