переключать видимость div с помощью списка флажков - PullRequest
Новая
       27

переключать видимость div с помощью списка флажков

2 голосов
/ 01 апреля 2009

У меня есть веб-приложение (ASP.NET2.0 C #). В нем есть div, который содержит список флажков и кнопку.

Я хочу включить просмотр div, поэтому в Интернете я получил некоторый javascript-код, чтобы помочь мне.

Вот код: 

<script language="javascript">
var state = 'hidden';

function showhide(layer_ref) {

    if (state == 'visible') 
    {
        state = 'hidden';
    }
    else 
    {
        state = 'visible';
    }
    if (document.all) 
    { //IS IE 4 or 5 (or 6 beta)
        eval( "document.all." + layer_ref + ".style.visibility = state");
    }
    if (document.layers) 
    { //IS NETSCAPE 4 or below
        document.layers[layer_ref].visibility = state;
    }
    if (document.getElementById && !document.all) 
    {
        maxwell_smart = document.getElementById(layer_ref);
        maxwell_smart.style.visibility = state;
    }
}
</script>

Я вызываю функцию так: 

<a href="javascript://" onclick="showhide('AlertDiv');">Choose Columns</a>

Когда я использую эту функцию, она показывает мне div с кнопкой, но не показывает мне список флажков .... Есть идеи о том, что происходит?

Спасибо.

Ответы [ 2 ]

2 голосов
/ 01 апреля 2009

Некоторые предложения:

  1. Вам действительно следует рассмотреть возможность использования библиотеки JavaScript, например ASP.NET AJAX или JQuery . Это поможет избавиться от кода, специфичного для браузера.
  2. Основывайте видимость на состоянии флажка, а не просто переключайте его.
  3. «display», вероятно, является лучшим стилем в этой ситуации, а не «visibility». Если вы используете «видимость», то вы просто получите пустую область, где «слой» должен быть, когда он невидим.
  4. Вместо "ссылки на слой" вы, вероятно, захотите передать идентификатор тега div и идентификатор флажка.

Пример в asp.net ajax:

Вот ваш флажок: 

<input type="checkbox" id="mycheck" onclick='showhide("mycheck","mylayer")' />

Вот область, которую вы хотите показать / скрыть: 

<div id='mylayer'>content</div>

Вот ваша функция: 

<script language="javascript">
function showhide(checkboxid, layerid)
{

    if($get(checkboxid).checked==true)
    {
         $get(layerid).display = "none";
    }
    else
    {
         $get(layerid).style.display = "";
    }
}
</script>
2 голосов
/ 01 апреля 2009

Вы пытались использовать дисплей вместо видимости?

Например, вместо: 

document.getElementById(layer_ref).style.visiblity = "hidden";
document.getElementById(layer_ref).style.visiblity = "visible";

Использование: 

document.getElementById(layer_ref).style.display = "none";
document.getElementById(layer_ref).style.display = "block";

Вам придется заменить все ваши ссылки на видимость отображением, а не только версией getElementById. Вы также можете захотеть использовать jQuery , который будет обрабатывать ваш сценарий с несколькими строками кода, плюс вам не понадобится атрибут onclick для облачения html. 

<script type="text/javascript" src="jquery-1.3.2.js">
</script>
<script type="text/javascript">
  $(document).ready(function() {
    $('.toggleLink').click(function(e) {
       e.preventDefault();
       $('#AlertDiv').toggle();
    });
  });
</script>
<a href="#" class="toggleLink">Choose Columns</a>
...