在站点加载上运行 JavaScript

running javascript on site load

本文关键字：运行 JavaScript 加载 站点      更新时间：2023-09-26

我在使用 java/css 选项卡式菜单系统时遇到了一些困难。我已经启动并运行菜单一段时间了，但我最近尝试在其中一页添加新的图表系统，但我发现很难让它正确显示。

我已经将其追溯到一个 css 条目，以防止在您将鼠标悬停在每个选项卡上之前显示所有选项卡式内容.CSS如下所示：

div.tabscontainer div.curvedContainer .tabcontent{
display:none;
padding:20px;
font-size:12px;
font-family: "CenturyGothicRegular", "Century Gothic", Arial, Helvetica, sans-serif;
}

如前所述，display：none 会阻止显示所有内容，直到您将鼠标悬停在其中一个选项卡上。但是，相同的显示：none 会阻止我的图表脚本正确绘制图表。如果我注释显示：none out，则图表绘制正确，但所有选项卡式内容都在页面加载时显示。有点像 22.

但是，如果我确实注释掉了display：none，然后将鼠标悬停在任何菜单选项卡上，则以下javascript将运行，并且所有相应的内容都会根据需要正确隐藏或显示：

<script language="JavaScript">
$(document).ready(function() {
    $(".tabs .tab[id^=tab_menu]").hover(function() {
        var curMenu=$(this);
        $(".tabs .tab[id^=tab_menu]").removeClass("selected");
        curMenu.addClass("selected");
        var index=curMenu.attr("id").split("tab_menu_")[1];
        $(".curvedContainer .tabcontent").css("display","none");
        $(".curvedContainer #tab_content_"+index).css("display","block");
    });
});
</script>

我可以以伪代码的方式理解脚本在做什么，它正在更改选项卡本身的属性（添加/删除"所选类"）以允许它显示"突出显示"，同时更改内容容器的属性（添加/删除显示：无或块）以隐藏或显示每个选项卡的内容（如适用）。

我现在的想法是，如果我添加上述脚本的修改版本以在页面加载时运行并自动选择第一个选项卡，那么我可以从 CSS 中删除全局显示：none，并允许 javascript 对其进行排序。

这最后引出了我的问题。我仍然是javascript的新手，我正在尝试弄清楚如何修改上面的代码以反映我需要在页面加载时自动选择给定的菜单（tab_menu_50），同时仍然允许用户将鼠标悬停在任何选项卡上。

您可以给出的任何指示都很乐意接受，如果以上没有任何意义，我提前道歉！（虽然，如果你能告诉我我完全错了，我也会很感激！

乔纳森

试图删除所有内容，但仍然给出网站结构的想法，希望这有助于找到答案。可能有一些错误的标签，但这只是因为我刚刚做的黑客工作允许我在这里发布一些 html......

<html>
<head>
# Below script enables tab switch on mouseover
<script language="JavaScript">
$(document).ready(function() {
$(".tabs .tab[id^=tab_menu]").hover(function() {
    var curMenu=$(this);
    $(".tabs .tab[id^=tab_menu]").removeClass("selected");
    curMenu.addClass("selected");
    var index=curMenu.attr("id").split("tab_menu_")[1];
    $(".curvedContainer .tabcontent").css("display","none");
    $(".curvedContainer #tab_content_"+index).css("display","block");
});
});
</script>
# Below script draws the chart
<script type="text/javascript">
    $(function(){
    $('.charttable').visualize({type: 'line'});
    });
</script>

<style>

# Below style sheet contains the problematic entry of display:none
div.tabscontainer div.curvedContainer .tabcontent{
display:none;
padding:20px;
font-size:12px;
font-family: "CenturyGothicRegular", "Century Gothic", Arial, Helvetica, sans-serif;
}

</head>
<body>

<div class="tabscontainer">
    <div class="tabs">
        <div class="tab first selected" id="tab_menu_50">
            <div class="link">Home</div>
            <div class="arrow"></div>
        </div>
        <div class="tab" id="tab_menu_150">
            <div class="link">Screen2</div>
            <div class="arrow"></div>
        </div>
        <div class="tab last" id="tab_menu_250">
            <div class="link">Screen3</div>
            <div class="arrow"></div>
        </div>
    </div>
    <div class="curvedContainer">
        <div class="tabcontent" id="tab_content_50">
        </div>
        <div class="tabcontent" id="tab_content_150">
        </div>
        <div class="tabcontent" id="tab_content_250">
<table class="charttable">
    <caption>Visits from August 16 to August 21</caption>
    <thead>
    <tr>
        <td></td>
        <th scope="col">chartlabel1</th>
        <th scope="col">chartlabel2</th>
        <th scope="col">chartlabel3</th>
        <th scope="col">chartlabel4</th>
        <th scope="col">chartlabel5</th>
        <th scope="col">chartlabel6</th>
        <th scope="col">chartlabel7</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th scope="row">SuiteA</th>
        <td>54</td>
        <td>49</td>
        <td>52</td>
        <td>61</td>
        <td>44</td>
        <td>57</td>
        <td>61</td>
    </tr>
    <tr>
        <th scope="row">SuiteB</th>
        <td>12</td>
        <td>11</td>
        <td>5</td>
        <td>13</td>
        <td>11</td>
        <td>10</td>
        <td>9</td>
    </tr>
    <tr>
        <th scope="row">SuiteC</th>
        <td>73</td>
        <td>67</td>
        <td>64</td>
        <td>74</td>
        <td>61</td>
        <td>73</td>
        <td>75</td>
    </tr>
 </tbody>
</table>
</div>
</div>
</body>
</html>

只需在示例代码中绑定悬停事件后，在 DOM ready 上触发事件： 

$(function(){
    $('#desiredTab').trigger('mouseover');
});

演示：http://jsfiddle.net/LC2un/

如果我

正确理解您的问题，您可能希望使用visiblity：hidden 而不是display：none。

如果设置了 display：none，则无法在这些节点上执行某些计算，除非维度被显式编码; 计算维度（没有固定宽度或高度的节点无法在所有浏览器中以可靠的方式计算）。

将节点设置为可见性：隐藏实质上是将其不透明度设置为 0，同时将其及其尺寸保留在文档中。

尝试替换显示：无;具有可见性：隐藏

希望应该工作。 如果没有，您也可以尝试在文档加载时使用jquery的.hide（）方法来设置其可见性。

$("div.tabscontainer div.curvedContainer .tabcontent").hide()
相关文章：