0

我有几个问题,因为我是 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 是这样设置的;(为简洁起见,仅显示 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"/>&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 将隐藏 div 的类更改为在使用指定的 onclick 函数单击锚标记时可见。这是最好的方法吗?我应该在隐藏的 div 周围有一个更新面板吗?我使用的第一种方法是调用页面重新加载,在其中我为所选标签的图片注入了 innerHTML,它有效,但我假设这是一种业余且不太有效的方法来完成此操作。

此查询不起作用;(无法让 picDisplay 函数识别参数,因此我对其中一个 div id 进行了硬编码以尝试使其工作)

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

        }
    });

</script>
4

6 回答 6

1

这是我要做的:

给每个链接添加一个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()
});

编辑 - 错过了 toggleclass 目标中的“#”。这里的工作示例:http: //jsfiddle.net/aF5Pg/

于 2012-09-21T08:36:52.537 回答
0

试试这个:

$('#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');
});
于 2012-09-21T08:31:58.377 回答
0

实际上有两种简单的方法可以做到这一点:

  1. 使用 .css()
  2. 使用 .toggleClass() 或 .hasClass()、.removeClass() 和 .addClass()

我认为最简单的方法是使用 .css()

你将会拥有 :

function toggleVisible() {
    if($(this).css("display") == "none")
        $(this).css("display", "block");
    else
        $(this).css("display", "none");
}
于 2012-09-21T08:32:23.100 回答
0
  1. 不,您不需要更新面板来实现您想要做的事情。

  2. 其次,我们需要更多关于您的方案的信息,以便为您获得最佳结果。按钮在哪里,是否会为每个要显示的按钮分配一个按钮?

IE

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

<input id="onBoardButton" />

将会:

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

如果您的情况比这更复杂,那么请解释您要做什么。

于 2012-09-21T08:35:57.257 回答
0

据我所知,asp.net 将根据组件 ID 生成随机客户端 ID。所以你可以在 Jquery 上使用包含选择器。

对于您的代码,只需修改为:

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

        }
    });

</script>

您还可以使用带有选择器的结束从选择器开始操作

于 2012-09-21T08:42:10.267 回答
0

这是另一种方法。它利用了您可以向 HTML 元素添加多个类的事实。首先隐藏所有“可隐藏”的 div,然后单击找到您需要显示的 div 并显示它。我认为一种更现代的方法是使用该data-rel属性(但我在工作并且太忙而无法查看它 - 我还没有完全采用它)

div 在加载时全部隐藏:

$(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.
});
于 2012-09-21T08:45:12.837 回答