скрыть див

Question

Я разрабатываю веб-страницу, в которой в какой-то момент меня поразили.

Я использую 3 кнопки загрузки в div, пусть id div будет "uploadDiv" у меня есть стрелка вправо и стрелка вниз изображения если я нажимаю на изображение со стрелкой вниз, должно отображаться содержимое «uploadDiv» если я нажимаю на изображение со стрелкой вправо, содержимое «uploadDiv» должно быть скрыто

Изображения должны быть в том же месте.

Если кто-нибудь знает решение, пожалуйста, дайте мне знать. Заранее спасибо.

С уважением, Киран Кумар.

Answer 1

Похоже, вы говорите о складной панели какой-то формы. В зависимости от того, что лежит в основе вашей исходной программы, у Microsoft Ajax Control Toolkit есть довольно хорошая опция складной панели.

Еще один замечательный вариант - взглянуть на jQuery и jQuery UI .

2. http://jqueryui.com/demos/accordion/
3. http://jqueryui.com/demos/accordion/#collapsible

ОБРАЗЕЦ

<script type="text/javascript">
    $(function() {
        $("#accordion").accordion({
            collapsible: true
        });
    });
</script>
<div id="accordion">
    <h3><a href="#">File Upload</a></h3>
    <div>
       CONTENT HERE
    </div>
</div>

Answer 2

Вопрос неопределенный, но какой бы ни была ваша реальная цель, вы достигнете эффекта, переключив класс на свои целевые элементы div и позволив вашему CSS реализовать эффект. Это намного лучше, чем изменение стиля непосредственно с помощью JS, потому что это разделяет заботу о стилизации на уровне стиля, а с помощью зонтичного класса это позволяет вам дешево модифицировать эффект с помощью дополнительных свойств в одной точке.

Теперь CSS, который вы на самом деле хотите, может быть visibility: hidden (если вы хотите сохранить поток макета) или display: none (если вы хотите, чтобы макет свернулся) или даже что-нибудь экзотическое, например изменение непрозрачности или цветов, если Вы хотите добиться эффекта затухания.

Наконец, включить это в JS можно легко, добавив или заменив содержимое свойства element.className, но реально гораздо более эффективный эффект можно получить, используя библиотеку, такую ​​как jquery или mootools, которая предложит вам большую часть этой работы, уже обернутой в виджеты и такие тонкости, как анимированные выцветания и т.д ..

Не попадитесь в ловушку создания эффекта с помощью JS и не попадитесь в ловушку переизобретения колеса, где удивительные разновидности в серебряной оправе уже существуют бесплатно.

Answer 3

Используя JQuery , вы можете легко это сделать. Вы можете скачать здесь jquery.js файл.

ЯШ:

<script src="js/jquery.js"></script>
<script>
   $j(document).ready(function(){

      $("#hide").click(function(){
           $("#uploadDiv").hide();    //hide the div 
      });

      $("#show").click(function(){
       $("#uploadDiv").show();    //show the div
      });

      $("#toggle").click(function(){
       $("#uploadDiv").toggle();  //toggle the div 
      });
   });
</script>

HTML:

<div id="uploadDiv">Some text here !</div>
<div id="hide">Hide</div>         
<div id="show">Show</div>
<div id="toggle">toggle</div>

нажмите на определенный div для выполнения желаемой операции.

Answer 4

<script language=javascript type='text/javascript'>
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('uploadDiv').style.visibility = 'hidden';
}
else {
if (document.uploadDiv) { // Netscape 4
document.hideshow.visibility = 'hidden';
}
else { // IE 4
document.all.uploadDiv.style.visibility = 'hidden';
}
}
}

function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('uploadDiv').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.uploadDiv.visibility = 'visible';
}
else { // IE 4
document.all.uploadDiv.style.visibility = 'visible';
}
}
}
</script> 

Выше скрипт переключает свойство style.visibility div. которые могут быть «видимыми» или «скрытыми»

<img src="right.png" onclick="hidediv()" />
<img src="down.png" onclick="showdiv()" />

Используйте события onclick для вызова необходимого скрытия или показа div

Взято из http://www.webmasterworld.com/forum91/441.htm

Answer 5

чтобы скрыть и показать свой div с помощью jquery, вы можете сделать что-то вроде:

 <head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("#downArr").click(function () {
      $("#uploadDiv").toggle();
      $("#downArr").toggle();
          $("#upArr").toggle();
    });

        $("#upArr").click(function () {
      $("#uploadDiv").toggle();
      $("#downArr").toggle();
          $("#upArr").toggle();
    });

  });
  </script>

</head>
<body>
        <img id="downArr" src="downArr.jpg">
        <img id="upArr" src="upArr.jpg" style="display:none;">

        <br>

    <div id="uploadDiv" style="display:none;">
        content
    </div>
</body>

Нажатие на изображение downArr.jpg сделает upArr.jpg и содержимое uploadDiv видимым

Ознакомьтесь с другими примерами функции переключения в http://docs.jquery.com/Effects/toggle

-Fortes

Answer 6

Добавьте класс в ваш CSS-файл,

.hidden { display: hidden; }

Добавление события onclick к вашим кнопкам

The button to hide
... onclick="document.getElementById('UploadDiv').className = '.hidden'" ....

The button to show
... onclick="document.getElementById('UploadDiv').className = '.default'" ....

Answer 7

Один из самых простых способов - использовать jquery .