Question

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

我的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在使用指定的onclick函数单击锚标记时将隐藏div的类更改为可见。这是最好的方法吗？我应该在隐藏的div周围有更新面板吗？我使用的第一种方法是调用页面重新加载，其中我为所选标签的图片注入innerHTML，它可以工作，但我认为这是一种业余且不太有效的方法来实现这一点。

这个查询不起作用;（无法让picDisplay函数识别参数，所以我硬编码了一个div id来试图让它工作）

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

        }
    });

</script>

Answer 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/

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

实际上有两种简单的方法可以做到：

使用.css（）
使用.toggleClass（）或.hasClass（）,. removeClass（）和.addClass（）

我认为最简单的方法是使用.css（）

你会：

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

Answer 4

不，您不需要更新面板来实现您的目标。
其次，我们需要有关您的方案的更多信息，以便为您获得最佳结果。按钮位于何处，是否会分配给您尝试显示的每个按钮？

即。

<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 selector或start with selector

进行操作

Answer 6

Here's another way of doing it。它利用了可以向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. });

jquery显示不可见的div

6 个答案: