1

我在使用 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 会阻止显示所有内容，直到您将鼠标悬停在其中一个选项卡上。然而，同样的 display:none 会阻止我的图表脚本正确绘制图表。如果我将 display:none 注释掉，则图表绘制正确，但所有选项卡式内容都显示在页面加载时。第 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 中删除全局 display: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>
4

2 回答 2

0

如果我正确理解您的问题，您可能想使用可见性：隐藏而不是显示：无。

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

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

尝试更换 display: none; 可见性：隐藏

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

$("div.tabscontainer div.curvedContainer .tabcontent").hide()
于 2013-01-23T20:17:13.240 回答
0

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

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

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

于 2013-01-23T20:20:48.877 回答