jquery显示不可见的div

由于我是ASP.Net新手，我有几个问题

我有一个aspx页面设置如下

无序列表区 隐藏分区 隐藏分区

无序列表代码：

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

我们使用两种类型的系统来混合EnerBurn®；通过燃油供应将其输送至柴油发动机，
车载系统和散装燃油系统。单击下面的项目以了解更多信息


车载系统-道路车辆（参见安装图）
船上系统-船舶（见安装图）
船上系统-加油驳船（见安装图）

隐藏的div是这样设置的；（为简洁起见，仅显示第2页，共3页）

“斯伦贝谢车载喷射装置”

典型注入装置安装（此处显示在压裂装置上）
“容器燃油进气管安装式喷射系统”

单容器的典型注射装置安装

我想使用JQuery在使用指定的onclick函数单击锚定标记时，将隐藏div的类更改为可见。这是最好的方法吗？我应该在隐藏的div周围有一个更新面板吗？我使用的第一种方法是调用页面重新加载，在这里我为所选标签的图片注入innerHTML，它可以工作，但我认为这是一种业余的、不太有效的方法

这个查询不起作用；（无法让picDisplay函数识别参数，因此我硬编码了一个div id，以尝试使其工作）

$（函数（）{
功能显示（divId）{
$（“[id='onBoardVehiclepicdisplay']”）。toggleClass（'visible'）；
}
});

试试这个：

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

您应该阅读以下内容：

还应将onclick属性（已弃用）替换为：

---

实际上有两种简单的方法：

Use.css（）

使用.toggleClass（）或.hasClass（）、.removeClass（）和.addClass（）

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

你应该：

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

不，你不需要一个更新面板来实现你想要做的事情

其次，我们需要更多关于您的场景的信息，以便为您获得最佳结果。按钮位于何处，是否会有一个按钮分配给您试图使其可见的每个按钮

i、 e

如果你的情况比这更复杂，那么请解释你想做什么。

以下是我要做的：

向每个链接添加一个数据rel标记，该标记指向相关的隐藏div：

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

---

编辑-从toggleclass目标中漏掉“#”。这里的工作示例：

据我所知，asp.net将根据组件ID生成随机客户端ID。因此您可以在Jquery上使用

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

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

        }
    });

</script>

$（函数（）{
功能显示（divId）{
$（“[id*='onBoardVehiclepicdisplay']”）。toggleClass（'visible'）；
}
});

您还可以使用或进行操作。它利用了可以向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.
});

---

要通过元素的

id

选择元素，只需使用元素的

#

后跟

id

作为选择器。因此，与

$（“[id='onBoardVehiclepicdisplay']”）不同，使用
$（“#onBoardVehiclepicdisplay”）
。JQuery具有内置的
切换功能。所以我必须给锚定标签一个id？要引用“单击”功能吗？我不确定是否理解。要引用单击，请使用选择器引用html元素（现在具有onclick属性），如id（#myId）、类（.myClass）或元素（a）。jQuery选择器看起来像CSS选择器。编辑：我没有看到您的第一个无序列表代码，我将更新我的答案。作为补充说明，您可以在这种情况下使用$（this）.data（'rel'）。什么不起作用？是显示/隐藏部分吗？你有我们可以看到的演示吗？它在小提琴上非常有效，但在我的aspx页面上却没有。我甚至从小提琴上复制了html和jquery，以确保它们完全相同；您是否在浏览器的控制台中看到任何有助于我们缩小问题范围的错误消息？让我们来确定一下…无序列表中没有按钮，有一个锚定标记。单击“here”时，我希望JQuery执行div类更改哦，好吧，您可以使用与上面相同的代码，因为它只是基于元素ID，不管元素是什么标记。所以，你的链接应该是一个ID，而不是一个按钮。太复杂了。您可以使用.fadeToggle（）函数来实现这一点。.fadeToggle（）将处理不透明度和循环。Css显示切换将减少功耗。没有最好的方法可以做到这一点，但有几种方法是正确的。您也可以这样做：最好的方法是添加或删除类，因此在这种情况下最好的方法是.toggleClass（）。我将尽可能更尊重地告诉您：有时您不是绝对正确的，您的解决方案不是最坏的，也不是最好的，因为这里没有最好的方法。所以请不要认为你是唯一正确的人，因为这是反建设性的。在fiddl中非常有效
$('#onBoardButton').on('click', function() {
    $('#onBoardVesselpicdisplay').toggleClass('visible');
});

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

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

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

        }
    });

</script>

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

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