"Листание" текста в форме путем нажатия кнопки
Здравствуйте! помогите пожалоста, я в ява скриптах не шарю... есть задумка для сайта.. напишите пожалоста скриптв котором может содержаться несколько текстов, и что при нажатии кнопки которую так же надо написать, в форме вместо текста 1 появлсялся текст 2, если опять нажать, то текст 2 меняется на текст 4 и так далее. Помогите пожалоста:help:
|
Ну может как то так можно, набросил за пару мин.
<html>
<head>
<script>
pages = 5;
function listNext(page) {
if (page == 1)
prev_page = pages;
else
prev_page = page-1;
if (page == pages)
next_page = 1;
else
next_page = page+1;
prev_id = "page_"+prev_page;
prev_elem = document.getElementById(prev_id);
prev_elem.style.display = "none";
id = "page_"+page;
elem = document.getElementById(id);
elem.style.display = "block";
document.getElementById('button').innerHTML = '<input type="button" onclick="listNext('+next_page+')" value="Дальше" />';
}
</script>
<style>
.page {
display: none;
}
</style>
</head>
<body>
<div id="page_1">text page 1 text page 1 text page 1 text page 1 </div>
<div id="page_2" class="page">text page 2 text page 2 text page 2 text page 2 </div>
<div id="page_3" class="page">text page 3 text page 3 text page 3 text page 3 </div>
<div id="page_4" class="page">text page 4 text page 4 text page 4 text page 4 </div>
<div id="page_5" class="page">text page 5 text page 5 text page 5 text page 5 </div>
<div id="button"><input type="button" onclick="listNext(2)" value="Дальше" /></div>
</body>
</html>
|
СПАСИБО БРАТ! Выручил! Я сегодня весь день голову ломал! весь учебник прочитал но ничего непонял! ВЫРУЧИЛ ПРЯМ! СПС ОГРОМНОЕ!
Еще есть маленький вопрос, писать ненадо нече. Просто есть код такой страницы. вот ссыль на эту страницу, код под спойлер не полез.http://svstalker.do.am/14-1-0-1.htm Там четко написанно что в поле получатель должно стоять Сионист . А как свой текст пихнуть в поле с сообщением? это из системы Юкоз. Я сейчас сохранил файл с кодом страницы в корневой папке сервера. Ннужно только чтоб когда страницу открываешь уже поле с сообщением было заполнено текстом который я введу в шаблоне. |
А было бы вапще Щикарно если бы в поле с сообщением стоял тот текст который щас отображается в вашем скрипте))
|
Цитата:
А можно подправить, чтобы была кнопка "Обратно"? |
|
рони, спасибо!
Возможно ли реализовать ваш скрипт на чистом JS, без jquery? Причина: страница сделана со скриптами на jquery-1.6.js - в этой версии данный скрип не работает, если оставить только jquery-1.9.1.js, то начинает сбоить уже сделанное содержание. |
BFAll,
для версии 1.6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>selectable demo</title>
<script src="http://code.jquery.com/jquery-1.6.js"></script>
<style>
p{ display: none; }
.selected { display: block; }
</style>
<script>
$(document).ready(function()
{
var p = $("p");
p.first().addClass("selected");
$(document).delegate( ".next, .prev", "click", function(event)
{
event.preventDefault();
var selected = $(".selected");
selected.removeClass("selected");
if($(this).hasClass("next") ) {
selected = selected.next('p').size()? selected.next():p.first() ;
}
else {
selected = selected.prev('p').size()? selected.prev():p.last();
}
selected.addClass("selected");
}
)
}
);
</script>
</head>
<body>
<a href="" class="prev">prev</a> <a href="" class="next">next</a>
<p>1</p><p>2</p><p>3</p>
</body>
</html>
|
рони, спасибо!
|
Помогите улучшить данный скрипт.
Как сделать так чтоб позиция сохранялась при закрытии и открытии браузера. То есть дошел до 3 закрыл, и открыл на 3. |
Цитата:
Использовать локальное хранилище или по старинке - куки. |
Так и надо чтоб на одном компе было.
Подскажите как забить положение в локальное хранилище, и затем считать его. Я просто только начинаю изучать. Пока не могу понять. |
Цитата:
|
Все никак не получается запомнить позицию в локальное хранилище, и затем открыть ее.
Может кто-нибудь поможет написать такой код на данном примере, а то все никак не получается. Цитата:
|
tk.stas,
:cray:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>selectable demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
p{ display: none; }
.selected { display: block; }
</style>
<script>
$(document).ready(function()
{
var p = $("p"), i = localStorage.getItem("indx")||0;
p.eq(i).addClass("selected");
$(document).on("click", ".next, .prev", function(event)
{
event.preventDefault();
var selected = $(".selected");
selected.removeClass("selected");
if($(this).hasClass("next") ) {
selected = selected.next('p').size()? selected.next():p.first() ;
}
else {
selected = selected.prev('p').size()? selected.prev():p.last();
}
selected.addClass("selected");
i = p.index(selected);
localStorage.setItem("indx", i);
}
)
}
);
</script>
</head>
<body>
<a href="" class="prev">prev</a> <a href="" class="next">next</a>
<p>1</p><p>2</p><p>3</p>
</body>
</html>
|
А на чистом js данный скрипт не поможите сделать?
Цитата:
|
Sasha2000,
а сами начать код? |
Цитата:
1) addClass, removeClass и hasClass заменяются соответственно на classList.add, classList.remove и classList.contains Подробнее про classList тут: https://developer.mozilla.org/ru/doc...ment/classList 2)$ можно заменить на document.querySelectorAll или на document.querySelector (если в дальнейшем на то, что мы выбираем селектором, пытаются повесить обработчик события) $(document).ready(function(){ //code } можно заменить на window.onload = function(){ //code } 3) p.eq(i) можно заменить на p[i] 4)$(document).on("click", ".next, .prev", function(event){//code}); очень условно можно заменить на document.querySelector('.next, .prev').addEventListener('click', function(event){//code}, false); 5)$(this) можно заменить на event.target ну и т.д. в общем то по каждой функции идёте на: https://api.jquery.com и изучаете, что она делает и ищете в учебнике как можно это сделать на нативном JS А вообще проще в теге head прописать: <script src="http://code.jquery.com/jquery-latest.min.js"></script> и не думать больше в дальнейшем как переписать с JQuery на JS :) |
Я использую данный скрипт в приложении на андройд, и почему-то именно в версии 4.3 происходит вылет при нажатии кнопок листания.
Получается не ахти. Зависаю уже на p[i], а что делать с
if(event.target.classList.contains("next") ) {
selected = selected.next('p').size()? selected.next():p.first() ;
}
else {
selected = selected.prev('p').size()? selected.prev():p.last();
}
вообще не пойму.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>selectable demo</title>
<style>
p{ display: none; }
.selected { display: block; }
</style>
<script>
window.onload = function(){
var p = document.querySelector("p"), i = localStorage.getItem("indx");
p[i].classList.add("selected");
document.querySelector('.next, .prev').addEventListener('click', function(event){
event.preventDefault();
var selected = document.querySelector(".selected");
selected.classList.remove("selected");
if(event.target.classList.contains("next") ) {
selected = selected.next('p').size()? selected.next():p.first() ;
}
else {
selected = selected.prev('p').size()? selected.prev():p.last();
}
selected.classList.add("selected");
i = p.index(selected);
localStorage.setItem("indx", i);
}, false);
}
</script>
</head>
<body>
<a href="" class="prev">prev</a> <a href="" class="next">next</a>
<p>1</p><p>2</p><p>3</p>
</body>
</html>
Буду благодарен за помощь:) |
tk.stas,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>selectable demo</title>
<style>
p{ display: none; }
.selected { display: block; }
</style>
<script>
window.onload = function(){
var p = document.querySelectorAll("p"), i = +localStorage.getItem("indx")||0;
p[i].classList.add("selected");
document.querySelector('.next').addEventListener('click', function(event){
event.preventDefault();
p[i].classList.remove("selected");
i = ++i%p.length;
p[i].classList.add("selected");
localStorage.setItem("indx", i);
}, false);
document.querySelector('.prev').addEventListener('click', function(event){
event.preventDefault();
p[i].classList.remove("selected");
i--;
i < 0 && (i = p.length-1);
p[i].classList.add("selected");
localStorage.setItem("indx", i);
}, false);
}
</script>
</head>
<body>
<a href="" class="prev">prev</a> <a href="" class="next">next</a>
<p>1</p><p>2</p><p>3</p>
</body>
</html>
|
Класс, спасибо!
|
| Часовой пояс GMT +3, время: 22:34. |