jQuery来显示可见DIV

Question

我有几个问题，因为我是新来的ASP.Net

1. 我已成立了如下一个aspx页面;

   无序列表区域 隐藏的div 隐藏的div

的无序列表的代码：

<div class="literaltext"> 
     <p> We utilize two types of systems for mixing EnerBurn&reg; with your fuel supply to deliver it to your diesel engine,<br /> On-Board systems and Bulk Fueling systems. Click on an item below for more information.</p> 
     <ul class="ulGreen"> 
      <li><b>On-Board systems - Road Vehicle</b><span style="color:black;"> (See an installation picture<a href="#" onclick="picDisplay('onBoardVehiclepicdisplay')">here</a>)</span> </li> 
      <li><b>On-Board systems - Marine Vessel</b><span style="color:black;"> (See an installation picture<a href="#" onclick="picDisplay('onBoardVesselpicdisplay')">here</a>)</span> </li> 
      <li><b>On-Board systems - Fueling Barge</b><span style="color:black;"> (See an installation picture<a href="#" onclick="picDisplay('onBoardBargepicdisplay')">here</a>)</span> </li> 

     </ul> 
    </div> 

隐藏的div设置了像这样;（仅示出2的3为了简洁）

<div id="onBoardVehiclepicdisplay" class="invisible"> 
     <fieldset class="dynamicinjectionpics"> 
      <legend>"Schlumberger On-Board Injection Unit"</legend> 
      <img Height="300px" Width="400px" alt="" 
      src="Images/InjectionUnitPictures/SchlumbergerInjectionUnit_FrackTruck.jpg"/>&nbsp;&nbsp;&nbsp; 
      <img Height="300px" Width="400px" alt="" 
      src="Images/InjectionUnitPictures/SchlumbergerInjectionUnit_FrackTruck_withEnclosure.jpg"/> 
      <br /><span id="Image1Text" runat="server">Typical injection unit installation (shown here on a Fracking Unit)</span> 

     </fieldset> 
    </div> 
    <div id="onBoardVesselpicdisplay" class="invisible"> 
     <fieldset class="dynamicinjectionpics"> 
      <legend>"Vessel Fuel Intake Line Mounted Injection System"</legend> 
      <img Height="300px" Width="400px" alt="" 
      src="Images/InjectionUnitPictures/SP-600 Injector.jpg"/>&nbsp;&nbsp;&nbsp; 
      <img Height="300px" Width="400px" alt="" 
      src="Images/InjectionUnitPictures/MarionInjector Installation.JPG"/> 
      <br /><span id="Span1" runat="server">Typical injection unit installation for single vessel</span> 

     </fieldset> 
    </div> 

我想使用JQuery来改变分类使用指定的onclick函数单击锚点标记时，隐藏的div将显示为可见。这是做这件事的最好方法吗？我应该在隐藏的divs附近有更新面板吗？我使用的第一种方法是调用一个页面重新加载，其中我为所选标记的图片注入了innerHTML，但它可以工作，但我认为这是一种业余和较低效的方式来完成此操作。

这个查询没有工作（不能让picDisplay功能识别，所以我硬编码的一个参数的DIV ID的尝试得到它的工作）

<script> 
    $(function() { 
     function picDisplay(divId) { 
      $("[id='onBoardVehiclepicdisplay']").toggleClass('visible'); 

     } 
    }); 

</script> 

Answer 1

这里就是我想要做的：

一个数据相对标签添加到每一个环节，它指的是有关隐藏的div：

<a href="#" data-rel="onBoardVehiclepicdisplay">here</a> 

使用下面的jQuery：

$('.ulGreen').delegate('li a', 'click', function(e){ 
    e.preventDefault(); 
    var target = $(this).attr('data-rel'); 
    $('#' + target).toggleClass('invisible'); // or show()/hide() 
}); 

编辑 - 错过了来自toggleclass目标的'＃'。这里的工作示例：http://jsfiddle.net/aF5Pg/

Answer 2

试试这个：

$('#onBoardVehiclepicdisplay').toggleClass('visible'); 

您应该阅读：id selector。

您也应更换onclick属性（不推荐）与：

<li><a href="#onBoardVehiclepicdisplay">...</a> 

$('li > a').click(function (event) { 
    event.preventDefault(); //to block the link 

    var id = $(this).attr('href'); 
    $(id).toggleClass('visible'); 
}); 

Answer 3

其实有两种简单的方法做到这一点：

1. 使用的.css（）
2. 使用.toggleClass（）或.hasClass（），.removeClass（）和.addClass（）

我认为是最简单的使用的CSS（）

你必须：

function toggleVisible() { 
    if($(this).css("display") == "none") 
     $(this).css("display", "block"); 
    else 
     $(this).css("display", "none"); 
} 

Answer 4

1. 不，你并不需要一个更新面板来实现你想要什么去做。

2. 其次，我们需要更多关于您的场景的信息以获得最佳效果。按钮的位置在哪里，并且是否会有一个按钮分配给您试图使其可见的每个按钮？

即

<div id="onBoardVesselpicdisplay"> 
</div> 

<input id="onBoardButton" /> 

是：

$('#onBoardButton').on('click', function() { 
    $('#onBoardVesselpicdisplay').toggleClass('visible'); 
}); 

如果你的情况是复杂多了，那么请你解释你想做什么。

Answer 5

asp.net，据我所知会根据组件ID生成随机客户端ID。所以你可以在Jquery上使用contain selector。

为您的代码，只需修改于：

<script> 
    $(function() { 
     function picDisplay(divId) { 
      $("[id*='onBoardVehiclepicdisplay']").toggleClass('visible'); 

     } 
    }); 

</script> 

你也可以使用操纵或end with selectorstart with selector

Answer 6

Here's another way of doing it。它利用了可以将多个类添加到HTML元素的事实。首先隐藏所有'隐藏'的div，然后点击找到需要显示并显示的div。我认为一个更现代的做法是使用data-rel属性（但我在工作中，并且忙于查找它 - 我还没有完全采用它）

divs全部隐藏负载：

$(document).ready(function() { 
    //Hide all of them initially 
    $('.toHide').hide(); 
}); 

在里面锚的点击的LI的div来显示的类名装配和JQuery.show（）来取消隐藏它。

$('LI A').click(function() { 
    $('.toHide').hide(); //hide all the divs first 
    $('.div-' + ($(this).attr('class'))).show(); //reveal the one you want. 
});