jquery显示不可见的div
jquery显示不可见的div
提问于 2012-09-21 08:29:15
我有几个问题，因为我是ASP.Net的新手
- 我有一个aspx页面设置如下； 无序列表区域隐藏div隐藏div
无序列表代码：
<div class="literaltext">
<p> We utilize two types of systems for mixing EnerBurn® 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是这样设置的；(为简洁起见，仅显示3中的2)
<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"/>
<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"/>
<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>在使用指定的onclick函数单击锚标记时，我希望使用JQuery将隐藏div的类更改为可见。这是最好的方法吗？我应该在隐藏的div周围有一个更新面板吗？我使用的第一种方法是调用页面重新加载，在其中为所选标记的图片注入innerHTML，这是可行的，但我假设这是一种业余的、不太有效的实现方法。
这个查询没有工作；(无法获得picDisplay函数来识别参数，所以我硬编码了一个div id来尝试使它工作)
<script>
$(function () {
function picDisplay(divId) {
$("[id='onBoardVehiclepicdisplay']").toggleClass('visible');
}
});
</script>回答 6
Stack Overflow用户
回答已采纳
发布于 2012-09-21 08:36:52
我会这样做：
在每个链接中添加一个data-rel标记，该标记引用相关的隐藏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()
});编辑-错过了“#”从跳伞目标。这里的工作示例：http://jsfiddle.net/aF5Pg/
Stack Overflow用户
发布于 2012-09-21 08:31:58
试试这个：
$('#onBoardVehiclepicdisplay').toggleClass('visible');你应该看看这个：id选择器。
还应将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');
});Stack Overflow用户
发布于 2012-09-21 08:32:23
实际上，有两种简单的方法可以做到：
- 使用.css()
- 使用.toggleClass()或.hasClass()、.removeClass()和.addClass()
我认为最简单的方法是使用.css()
你可能会：
function toggleVisible() {
if($(this).css("display") == "none")
$(this).css("display", "block");
else
$(this).css("display", "none");
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12526878
复制相关文章
相似问题
腾讯云开发者
