Включить отображение/скрытие содержимого с помощью javascript

Я хотел бы иметь гипертекст «Я хочу создать пользовательский пакет» на своей веб-странице. Нажатие «Я хочу создать пользовательский пакет» должно привести к скрытию гипертекста и отображению желаемого DIV, который в моем случае имеет id = «hide2».Включить отображение/скрытие содержимого с помощью javascript

То, что я прямо сейчас:

1: Соответствующий Javascript

<script type="text/javascript"> 
function load1() 
{ 
    document.getElementById('hide2').style.display='none'; 
    return false; 
} 
function toggle() 
{ 
    document.getElementById('hide1').style.display='none'; 
    document.getElementById('hide2').style.display=''; 

} 
</script>

2. Соответствующий HTML-код:

<body onLoad="load1()"> 
<a onclick="toggle()" href="" id="hide1">I want to create a custom package</a> 
    <div id="hide2"> 
    <p><input type="radio" name="">Name your price: 
    <input type="text" width="10px">.00($299 minimum)<br> 
    </p> 
</div> 
</body>

Этот код работает почти нормально, нажав на гипертекста скрывает ссылку и отображает div «hide2». Помимо того, что он возвращается к своему телу. Режим загрузки (то есть гипертекст, показанный и скрытый div) только через несколько миллисекунд появляется div «hide2».
Пожалуйста, будьте щедры, предлагая, где я сделал ошибку, кроме предоставления решения. Спасибо заранее.

источник

2013-08-01 Jinandra

Возможный дубликат [javascript hide/show element] (http://stackoverflow.com/questions/6242976/javascript-hide-show-element) – oleq

Вместо использования 'load1' вы можете просто добавить отображение' style = " : none "' к элементу 'hide2'. Нет причин использовать дополнительный javascript при загрузке, если вы можете просто применить его непосредственно к CSS –

Спасибо @KevinJantzer за ваше предложение. yes tha может быть одним из способов сделать это. – Jinandra

Вы можете переключить скрипт из тела тега, и рассмотреть возможность использования JQuery, и это для начальной шкурой:

$(document).ready(function (
{ 
//Script here 
});

В противном случае, причина этой проблемы вы видите, что вы Арен отмена обратной передачи страницы. Подумайте об использовании этого в качестве HREF:

href="javascript:void(0);"

источник

2013-08-01 20:01:16

Проблема в том, что в вашей ссылке есть href="" - это заставит браузер перезагружать страницу при нажатии. Измените свой onclick на toggle(); event.preventDefault();, и он должен предотвратить перезагрузку. Вероятно, вы также должны изменить ссылку на href="#", что приведет к тому, что браузер переместится в начало страницы, если он запущен по ошибке, а не перезагружается.

источник

2013-08-01 19:59:27 Jules

Альтернативно; его функция '' '' toggle() ''' может возвращать значение' false' – Indy

Вы также можете просто удалить атрибут 'href' вообще. Или удалите onclick и сделайте следующее: 'href =" javascript: toggle(); return false "' –

Жюль указал на основную проблему в коде, но код не был очень хорошенькая иначе либо, так что я взял на себя смелость рефакторинга кода: http://jsfiddle.net/CgQgD/2/ :)

В принципе, вы хотите, чтобы скрытый определялся как класс, а не манипулировал значениями CSS непосредственно из JS, таким образом вы можете легко удалить, добавить и проверить скрытый класс.

.hidden { display: none; }

Это также означает, что вы можете легко иметь элемент скрытый первоначально без использования встроенного CSS, что делает ваш onload обработчик бесполезно (вы обычно также использовать window.addEventListener('load', ...); вместо этого, если вы действительно должны использовать событие OnLoad) ,

источник

2013-08-01 20:19:42 quinnirill

Включить отображение/скрытие содержимого с помощью javascript

ответ

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