Форум Сайтостроение Веб-строительство

Меняющийся текст

12
Mosart
На сайте с 07.05.2010
Offline
69
Mosart
4458

Здравствуйте.

Очень беспокоит вопрос того, как сделать вот такую штуку (схематично изобразил):

Т.е. нужно, чтобы при нажатии на разные пункты меню различные блоки появлялись внизу. Обязательное условие - эти блоки должны уже находиться на странице, но быть скрытыми (т.е. все содержимое находится на одной странице, сторонние документы не грузятся, при нажатии они просто становятся видимыми и выводятся в нижнюю область).

Пробовал реализовать так:


<div style="text-align:center; margin-top:0px; margin-right:auto; margin-bottom:0px; margin-left:auto; border-width:1px; border-color:black; border-style:solid; width:405px;">
= <a href="page_1.html" target="frame_1">PAGE 1</a>= =<a href="page_2.htm" target="frame_1">PAGE 2</a>=
<hr size="1" />
<iframe name="frame_1" width="400" height="300" frameborder="0" scrolling="no"></iframe>
</div>

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

Пробовал так же делать через выпадающий текст - не смог подогнать под эту задачу в силу кривизны рук, хотя думаю сделать это можно.

Описал как мог, очень нуждаюсь в ответе - иначе не писал бы...

RO
На сайте с 13.07.2009
Offline
88
RedOK
#1

ну как я понял примерно так 


<script>

function sw(id) {

	var o = document.getElementById(id)

	if (o.style.display=='') {

		o.style.display='none'



	} else {

		o.style.display=''



	}

}

</script>

<a href="#" onclick="sw(1)">a</a>

<a href="#" onclick="sw(2)">b</a>

<a href="#" onclick="sw(3)">c</a>

<div id="1" style="display:none;">ololo 1</div>

<div id="2" style="display:none;">ololo 2</div>

<div id="3" style="display:none;">ololo 3</div>
Mosart
На сайте с 07.05.2010
Offline
69
Mosart
#2

Способ, описанный выше, был реализован мной так:

Недостаток и этого метода и приведенного выше в том, что при последовательном нажатии на ссылку 1, а затем 2 - на странице оказываются оба текста, а они должны меняться.

Так же желательно, чтобы вся страница в браузере не обновлялась как в предыдущем способе.


<script>
function collapsElement(id) {
if ( document.getElementById(id).style.display != "none" ) {
document.getElementById(id).style.display = 'none';
}
else {
document.getElementById(id).style.display = '';
}
}
</script>
<a href="javascript:collapsElement('div1')" onfocus="this.blur()"><span id="span1">1111</span></a> ;
<a href="javascript:collapsElement('div2')" onfocus="this.blur()"><span id="span2">2222222</span></a>

<div style="display:none" id="div1">
ну а тут подробнее... 1
</div>

<div style="display:none" id="div2">
gdhgrtehr.<br>
ну а тут подробнее... 2
</div>

Нашел самый отличный пример того, что хочется получить:

http://cgi.ebay.com/ws/eBayISAPI.dll?ViewItem&item=250684686669&var=550011954576&ssPageName=STRK:MEWAX:IT

Переключение между "Description" и "Shipping and payments" (прокрутите под описание лота). Меняется лишь тот блок, где находится информация, причем страница при этом не перезагружается.

Спрашиваем и отвечаем по Влияние закрытых от индексации Прокрутка к #div вместе
RO
На сайте с 13.07.2009
Offline
88
RedOK
#3

мдэ товарисчь...

Так же желательно, чтобы вся страница в браузере не обновлялась как в предыдущем способе.

...

Mosart
На сайте с 07.05.2010
Offline
69
Mosart
#4
RedOK:
мдэ товарисчь...

...

Извиняюсь некорректно выразился. При нажатии на ссылку в этом способе браузер перекидывает в начало страницы. Желательно, чтобы фокусировка либо оставалась без изменений, либо перекидывала в область меню, как в описанном мной способе.

Ёхан Палыч
На сайте с 07.05.2006
Offline
169
Ёхан Палыч
#5
Mosart:
При нажатии на ссылку в этом способе браузер перекидывает в начало страницы. Желательно, чтобы фокусировка либо оставалась без изменений, либо перекидывала в область меню, как в описанном мной способе.

Ну так замените a href, например, на <span>

RO
На сайте с 13.07.2009
Offline
88
RedOK
#6

можно сделать как советует Ёхан Палыч, а если

либо перекидывала в область меню
то тут нужно сделать якорь

<a href="#bottom" onclick="...">1</a>

.....

<a name="bottom"></a>

<div id="..."></div>

както так

Mosart
На сайте с 07.05.2010
Offline
69
Mosart
#7
RedOK:
можно сделать как советует Ёхан Палыч, а если то тут нужно сделать якорь
<a href="#bottom" onclick="...">1</a>
.....
<a name="bottom"></a>
<div id="..."></div>

както так

Действительно просто и оригинально... Спасибо.

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

AlikZP
На сайте с 22.11.2009
Offline
107
AlikZP
#8

Чтоб не прыгала ссылка - добавьте

return false;

либо в конец функции function collapsElement(id)

либо в конец функции function sw(id)

Зависит от того, чей вариант вы используете

Вариант от RedOK 

<script>

function sw(id) {

	var o = document.getElementById(id)

	if (o.style.display=='') {

		o.style.display='none'



	} else {

		o.style.display=''



	}

           return false;

}

</script>

<a href="#" onclick="sw(1)">a</a>

<a href="#" onclick="sw(2)">b</a>

<a href="#" onclick="sw(3)">c</a>

<div id="1" style="display:none;">ololo 1</div>

<div id="2" style="display:none;">ololo 2</div>

<div id="3" style="display:none;">ololo 3</div>
Website CMS: быстрая, удобная, недорогая! Вечная лицензия за 45$ (/ru/forum/524503) Яся - быстрый поиск фото для товаров. OpenCart/ocStore. Дополнение. (/ru/forum/665287) Грамотная верстка ваших макетов (/ru/forum/comment/8853216)
Mosart
На сайте с 07.05.2010
Offline
69
Mosart
#9
AlikZP:
Чтоб не прыгала ссылка - добавьте
return false;
либо в конец функции function collapsElement(id)
либо в конец функции function sw(id)
Зависит от того, чей вариант вы используете

Вариант от RedOK

Вариант не сработал. Да и не актуально - метод с якорями работает отлично. Если бы найти как обнулять содержимое при вызове нового блока - задача была бы решена.

4arger
На сайте с 17.12.2008
Offline
95
4arger
#10

попробуйте это

js


<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("div.ololo").hide();
$("a.ololo").click(function() {
$("div.ololo").hide();
$("div#" + $(this).attr("href")).show();
return false;
});
});
</script>

html


<a href="id1" class="ololo">a</a>
<a href="id2" class="ololo">b</a>
<a href="id3" class="ololo">c</a>
<div id="id1" class="ololo">ololo 1</div>
<div id="id2" class="ololo">ololo 2</div>
<div id="id3" class="ololo">ololo 3</div>
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий