| |
|
|
| | Есть 2 DIV::
<div id="m" style="width:100%; height:100%"></div>
<div id="m1" style="width:100%; height:100%"></div>
|
И 2 ссылки:
<a href=”#1” onclick="func ('m'); return false">Таблица 1</a>
<a href=”#2” onclick="func ('m1'); return false">Таблица 2</a>
|
Помогите пожалуйста написать функцию func так, чтобы при загрузке страницы отображался только DIV c id="m".
При нажатии на ссылку "Таблица 1" отображался только DIV c id="m",
а при нажатии на ссылку "Таблица 2" отображался только DIV c id="m1".
И главное чтобы DIV, который должен отображаться при нажатии на ту или иную ссылку, не исчезал с экрана при повторном нажатии на эту ссылку. | |
| |
|
|
| |
|
|
| |
для: Port_Artur
(31.07.2012 в 22:11)
| | |
<div id="m0" style="width:100px;height:100px;
border:1px solid #000;">div 1</div>
<div id="m1" style="width:100px;height:100px;
border:1px solid #000;display:none;">div 2</div>
<a href="#" onclick="func(0); return false">Таблица 1</a>
<a href="#" onclick="func(1); return false">Таблица 2</a>
<script>
function func(n) {
document.getElementById("m"+(n^1)).style.display = "none";
document.getElementById("m"+n).style.display = "block";
}
</script>
|
Вот только <a href="#" onclick="чтобы_щелк_и_все" ... это плохая манера. | |
| |
|
|
| |
|
|
| |
для: confirm
(01.08.2012 в 07:28)
| | | Большое Спасибо.
>Вот только <a href="#" onclick="чтобы_щелк_и_все" ... это плохая манера.
А какая хорошая? | |
| |
|
|
| |
|
|
| |
для: Port_Artur
(01.08.2012 в 08:17)
| | | Чем обоснован ваш выбор именно этого тега? Перечислите все свои доводы, загибая пальцы. | |
| |
|
|
| |
|
|
| |
для: confirm
(01.08.2012 в 08:20)
| | | Да я честно говоря другого, кроме тега ссылки для этого и не знаю. Ну событие onclick можно и к другим тегам приписать, просто мне нужно чтобы на текст нажимали. Если есть другие варианты более подходящие к моему случаю, буду признателен если подскажете. | |
| |
|
|
| |
|
|
| |
для: Port_Artur
(01.08.2012 в 14:09)
| | | >просто мне нужно чтобы на текст нажимали
То есть привлечь внимание ссылкой. Но не одна же она может выглядеть так:
<style>
.red {
width:100px;
height:100px;
border:1px solid #f00;
color: #f00;
}
.blue {
width:100px;
height:100px;
border:1px solid #00f;
color: #00f;
display: none;
}
p {
cursor: default;
}
span {
color: #00f;
text-decoration: underline;
cursor: pointer;
}
</style>
<div id="m0" class="red">Это красный</div>
<div id="m1" class="blue">Это синий</div>
<p>Можно выбрать <span onclick="func(0)">красный</span>
или <span onclick="func(1)">синий</span>.</p>
<script>
function func(n) {
document.getElementById("m"+(n^1)).style.display = "none";
document.getElementById("m"+n).style.display = "block";
}
</script>
|
| |
| |
|
|
| |
|
|
| |
для: confirm
(01.08.2012 в 14:48)
| | | Спасибо за пример.
Единственно вопрос, почему функция не работает если id ссылок меняю на m1 и m2 .
Я просто не понял как функция работает, думал что из-за смены цифр ничего страшного не произойдёт. | |
| |
|
|
| |
|
|
| |
для: Port_Artur
(01.08.2012 в 21:47)
| | | Даже и не знаю, что сказать. Вы обязаны знать о всех операциях, которыми оперирует язык, в частности о логических. Они есть во всех языках.
У вас всего два блока, состояниями которых нужно управлять, а значит удобно с помощью логической операции формировать id блока, который на момент работы функции является противоположным.
Каждый span передает в функцию аргумент, который является порядковым номером блока в наборе (массиве элементов), то есть тот блок, который нужно открыть. А номер закрываемого блока получается путем логической операции ИСКЛЮЧАЮЩЕЕ ИЛИ (XOR, ^): Чем вас не устраивает ноль не знаю, но чтобы это работало и для m1, m2, нужно передавать в функцию 1 и 2 соответственно, а вторым операндом операции XOR должна быть не 1, а 3. | |
| |
|
|
