Question

我有两个单独的.inc文件，我想根据DIV是显示还是隐藏（移动[手机/平板电脑]或桌面）来交替展示

这是我的代码，位于BODY：

<script>
$(function () {
    if ($('#leftNavCustom').css('display') == 'block') {
        alert('mobile');
        <!-- #include virtual ="includeNav/msMobile.inc" -->
    }
    if ($('#leftNavCustom').css('display') == 'none') {
        alert('desktop');
            <!-- #include virtual ="includeNav/msDesktop.inc" -->
    }
});
</script>

如果我删除了两个#include行，则警报正常，但使用上面的代码，它既不显示.inc内容也不显示警报。

如何修改上述代码才能正常工作？

Answer 1

除非那些.inc文件实际上包含更多的javascript，否则这将无效。除了javascript，你不能只在javascript中输出内容。要将内容写入DOM，您可能会使用类似

的内容

document.write('<div class="content">text</div>')

另一种选择是在单独的<div>中输出.inc文件，但使用CSS隐藏它们。然后在您的javascript中，您可以显示相应的<div>：

<强> JS

    $(function () {
        if ($('#leftNavCustom').css('display') == 'block') {
            document.getElementById('desktop').style.display = 'none';
            document.getElementById('mobile').style.display = 'block';
        }
        if ($('#leftNavCustom').css('display') == 'none') {
            document.getElementById('desktop').style.display = 'block';
            document.getElementById('mobile').style.display = 'none';
        }
    });

<强> HTML

<div id="mobile"><!-- #include virtual ="includeNav/msMobile.inc" --></div>
<div id="desktop"> <!-- #include virtual ="includeNav/msDesktop.inc" --></div>

Answer 2

如果您已经使用jQuery，基于Reinder Wit的解决方案，您可以执行以下操作：

<强> HTML

<div id="ms-mobile" class="hide">
    <!-- #include virtual ="includeNav/msMobile.inc" -->
</div>
<div id="ms-desktop" class="hide">
    <!-- #include virtual ="includeNav/msDesktop.inc" -->
</div>

<强> CSS

.hide {
    display: none;
}

<强> JS

<script>
    $(function () {
        var navDisplay = $('#leftNavCustom').css('display'),
            msMobile = $('#ms-mobile'),
            msDesktop = $('#ms-desktop');

        msMobile.toggleClass('hide', navDisplay == 'none');
        msDesktop.toggleClass('hide', navDisplay == 'block');
    });
</script>

如何使用JavaScript在ASP.net中显示动态内容

2 个答案: