Question

我在使用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会阻止我的图表脚本正确绘制图表。如果我对display：none out进行注释，则会正确绘制图表，但所有选项卡式内容都会在页面加载时显示。 Catch 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>

我可以理解脚本在psuedo-code方式中的作用，它正在改变选项卡本身的属性（添加/删除“选定的类”）以允许它在更改时显示为“突出显示”内容容器的属性（添加/删除显示：无或阻止）隐藏或显示每个选项卡的内容（如果适用）。

我现在的想法是，如果我添加上述脚本的修改版本以在页面加载上运行并自动选择第一个选项卡，那么我可以从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>

Answer 1

如果我理解你的问题，你可能想要使用visiblity：hidden而不是display：none。

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

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

尝试替换display：none;有可见性：隐藏

希望能够奏效。如果没有，您还可以尝试在文档加载时使用jquery的.hide（）方法设置其可见性。

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

Answer 2

只需触发DOM准备就绪的事件，之后在您的示例代码中绑定了悬停事件：

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

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

在网站加载上运行javascript

2 个答案: