Question

我在HTML中有一个纯CSS菜单，可以正常工作，并且可以在任何项目上设置活动状态。它可以在单个页面上很好地工作，并且每页设置了活动状态。问题是在iframe 1中使用时。没有打开的页面处于活动状态，这很好并且可以正常工作，因为未设置“活动”类。在目标框架2中显示新页面时，我需要将框架1中的菜单项onclick设置为“ class = active”状态，在此先感谢，感谢您的帮助。

我已经从网络资源中使用了几种javascript，jscript，jquery和css方法，但没有帮助。

这是菜单系统的一部分。同一页上总共有12个块。

<head>
<base target="I1blj">
</head>
<body>
<p><b class="style2"><a name="jan"></a>January</b></p>
<table cellpadding="0" cellspacing="0" class="table3">
    <tr>
        <td style="width: 10px" valign="top">
        <img alt="" height="54" src="../../scripts/menus/bubblebar/bg-bubplastic-lft.gif" width="13"></td>
        <td>
        <div id="cssmenu">
            <ul>
                <li><a href="blj_jan/blj_01_01.htm"><span>01</span></a></li>
                <li><a href="blj_jan/blj_01_02.htm"><span>02</span></a></li>
                <li><a href="blj_jan/blj_01_03.htm"><span>03</span></a></li>
                <li><a href="blj_jan/blj_01_04.htm"><span>04</span></a></li>
                <li><a href="blj_jan/blj_01_05.htm"><span>05</span></a></li>
                <li><a href="blj_jan/blj_01_06.htm"><span>06</span></a></li>
                <li><a href="blj_jan/blj_01_07.htm"><span>07</span></a></li>
                <li><a href="blj_jan/blj_01_08.htm"><span>08</span></a></li>
                <li><a href="blj_jan/blj_01_09.htm"><span>09</span></a></li>
                <li><a href="blj_jan/blj_01_10.htm"><span>10</span></a></li>
                <li><a href="blj_jan/blj_01_11.htm"><span>11</span></a></li>
                <li><a href="blj_jan/blj_01_12.htm"><span>12</span></a></li>
                <li><a href="blj_jan/blj_01_13.htm"><span>13</span></a></li>
                <li><a href="blj_jan/blj_01_14.htm"><span>14</span></a></li>
                <li><a href="blj_jan/blj_01_15.htm"><span>15</span></a></li>
            </ul>
        </div>
        <div id="cssmenu">
            <ul>
                <li><a href="blj_jan/blj_01_16.htm"><span>16</span></a></li>
                <li><a href="blj_jan/blj_01_17.htm"><span>17</span></a></li>
                <li><a href="blj_jan/blj_01_18.htm"><span>18</span></a></li>
                <li><a href="blj_jan/blj_01_19.htm"><span>19</span></a></li>
                <li><a href="blj_jan/blj_01_20.htm"><span>20</span></a></li>
                <li><a href="blj_jan/blj_01_21.htm"><span>21</span></a></li>
                <li><a href="blj_jan/blj_01_22.htm"><span>22</span></a></li>
                <li><a href="blj_jan/blj_01_23.htm"><span>23</span></a></li>
                <li><a href="blj_jan/blj_01_24.htm"><span>24</span></a></li>
                <li><a href="blj_jan/blj_01_25.htm"><span>25</span></a></li>
                <li><a href="blj_jan/blj_01_26.htm"><span>26</span></a></li>
                <li><a href="blj_jan/blj_01_27.htm"><span>27</span></a></li>
                <li><a href="blj_jan/blj_01_28.htm"><span>28</span></a></li>
                <li><a href="blj_jan/blj_01_29.htm"><span>29</span></a></li>
                <li><a href="blj_jan/blj_01_30.htm"><span>30</span></a></li>
                <li><a href="blj_jan/blj_01_31.htm"><span>31</span></a></li>
            </ul>
        </div>
        </td>
        <td style="width: 10px" valign="top">
        <img alt="" height="54" src="../../scripts/menus/bubblebar/bg-bubplastic-rgt.gif" width="13"></td>
    </tr>
</table>
<p>&nbsp;</p>

这是菜单中当前的CSS代码：

#cssmenu {
    width: 645px;
    height: 27px;
    margin: 0;
    padding: 0;
    background: url(bg-bubplastic.gif) top left repeat-x;
}
#cssmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#cssmenu ul li {
    float: left;
    margin: 0;
    padding: 0;
    background: transparent url(bg-bubplastic-button.gif) top left no-repeat;
}

#cssmenu ul li a {
    display: block;
    height: 27px;
    padding-left: 14px;
    float: left;
    text-transform: uppercase;
    font-family: 'Helvetica Neue',helvetica,'microsoft sans serif',arial,sans-serif;
    font-size: 70%;
    color: #FFFFFF;
    text-decoration: none;
}

#cssmenu ul li a span {
    display: block;
    float: left;
    height: 27px;
    padding-top: 5px;
    padding-right: 14px;
    background: transparent url(bg-bubplastic-button.gif) top right no-repeat;
    cursor: pointer;
}

#cssmenu ul li.active a {
    background: transparent url(bg-bubplastic-h-pink.gif) top left no-repeat;
}


#cssmenu ul li a:hover {
    background: transparent url(bg-bubplastic-h-pink.gif) top left no-repeat;
}
#cssmenu ul li.active a span {
    background: transparent url(bg-bubplastic-h-pink.gif) top right no-repeat;
}

#cssmenu ul li a:hover span {
    background: transparent url(bg-bubplastic-h-pink.gif) top right no-repeat;
}

在框架加载时，根本不应该有活动状态，除非您单击菜单项，然后应将该项目号设置为活动状态，并在目标iframe中显示适当的页面。您可以查看示例页面here：只需单击左侧的一个月，就会显示上述日期菜单。

在Iframe上设置CSS中的菜单元素/类的活动状态

0 个答案: