在网站负载上运行javascript

Question

I'm having a spot of difficulty with a java/css tabbed menu system. 我在使用java / css选项卡式菜单系统时遇到了麻烦。 I've had the menus up and running for some time but I've recently tried adding a new charting system to one of the pages and I've been finding it difficult to get it to display properly. 我已经设置菜单并运行了一段时间，但是最近我尝试向其中一个页面添加新的图表系统，并且发现很难使其正确显示。

I've traced it down to a css entry that's needed in order to prevent all of the tabbed content from being displayed until you hover over each tab. 我将其追溯到一个css条目，该条目是为了防止在您将鼠标悬停在每个选项卡上之前显示所有选项卡式内容的。 CSS is as below: CSS如下：

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

As said, the display:none prevents all of the content from being displayed until you hover over one of the tabs. 如前所述，display：none会阻止所有内容显示，直到您将鼠标悬停在一个选项卡上。 However that same display:none prevents my charting script from drawing the chart properly. 但是，相同的display：none会阻止我的图表脚本正确绘制图表。 If I comment the display:none out, then the chart is drawn correctly but all of the tabbed content is displayed on page load. 如果我注释display：none out，则可以正确绘制图表，但是所有选项卡式内容都在页面加载时显示。 Sort of Catch 22. 渔获量22。

However, if I do comment out the display:none and then hover over any of the menu tabs, the following javascript runs and all the respective content is correctly hidden or displayed as required: 但是，如果我确实将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>

I can sort of understand what the script is doing in a psuedo-code sort of way, it's changing the property of the the tab itself (add/remove "selected class") to allow it to appear "highlighted" while changing the property of the content container (add/remove display:none or block) to either hide or show the content of each tab as applicable. 我可以某种程度地理解脚本以伪代码执行的操作，它正在更改选项卡本身的属性（添加/删除“选定的类”）以使其在更改属性的同时显示为“突出显示”内容容器（添加/删除显示：无或阻止）以隐藏或显示每个选项卡的内容（如果适用）。

My thinking, now, is that if I add a modified version of the above script to run on page load and automatically select the first tab, then I can remove the global display:none from the CSS and just allow the javascript to sort it out. 现在，我的想法是，如果添加上述脚本的修改版本以在页面加载时运行并自动选择第一个标签，则可以从CSS中删除全局显示：none，只允许javascript对其进行排序。

This, finally, leads to my question. 最后，这引出了我的问题。 I am still new to javascript and I'm trying to work out how I'd modify the above code to reflect my need for it to automatically select a given menu (tab_menu_50) on page load, while still allowing the user to hover over any tab. 我对javascript还是陌生的，我正在尝试弄清楚如何修改上面的代码以反映我对它的需要，以便在页面加载时自动选择给定的菜单（tab_menu_50），同时仍然允许用户将鼠标悬停在任何菜单上标签。

Any pointers that you can give are gladly accepted and I apologise in advance if nothing of the above makes any sense at all! 您可以提供的任何指针都会很高兴地被接受，如果以上任何内容都没有任何意义，我预先表示歉意！ (Although, if you could tell me I've got it completely wrong, I'd be grateful of that too!) （尽管，如果您能告诉我我完全错了，我也将不胜感激！）

Jonathan 乔纳森

Have tried to remove all the content but still give an idea of the site structure, hope this helps in finding an answer. 试图删除所有内容但仍给出站点结构的想法，希望这有助于找到答案。 There may be some errant tags but that's just because of the hack job I've just done to allow me to post some html on here... 可能会有一些错误的标签，但这仅仅是因为我刚刚做了允许我在此处发布一些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>

Answer 1

If I understand your issue correctly, you probably want to use visiblity:hidden instead of display:none. 如果我正确理解了您的问题，则可能要使用visiblity：hidden而不是display：none。

If you set the display:none, then certain calculations can't be done on those nodes unless the dimensions are explicitly coded in; 如果设置display：none，那么除非在维度上明确编码，否则无法在这些节点上执行某些计算； calculated dimensions (nodes that don't have a fixed width or height can't be calculated ni a reliable manner across all browsers). 计算得出的尺寸（没有固定宽度或高度的节点无法通过所有浏览器可靠地计算出来）。

Setting a node to visibility:hidden essentially sets its opacity to 0, while leaving it and its dimensions within the document. 将节点设置为可见性：隐藏本质上将其不透明度设置为0，同时将其及其尺寸保留在文档中。

Try replacing display: none; 尝试更换显示器：无； with visiblity: hidden 带有可见性：隐藏

Hopefully should work. 希望应该工作。 If it doesn't, you can also try setting its visibility by using jquery's .hide() method on document load.. 如果没有，您还可以尝试在文档加载时使用jquery的.hide（）方法设置其可见性。

$("div.tabscontainer div.curvedContainer .tabcontent").hide()

Answer 2

Just trigger the event on DOM ready, after the hover event is bound in your example code: 在示例代码中绑定了悬停事件后，只需在DOM ready上触发事件即可：

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

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

在网站负载上运行javascript

问题描述

2 个解决方案

解决方案1
0 2013-01-23 20:17:13

解决方案2
0 已采纳 2013-01-23 20:20:48

在网站负载上运行javascript

问题描述

2 个解决方案

解决方案1 0 2013-01-23 20:17:13

解决方案2 0 已采纳 2013-01-23 20:20:48

解决方案1
0 2013-01-23 20:17:13

解决方案2
0 已采纳 2013-01-23 20:20:48