javascript - 菜单选项卡仅在 Internet Explorer 8 中无法正常运行

Question

菜单选项卡仅在 Internet Explorer 8 中无法正常工作菜单选项卡仅在 Internet Explorer 8 中无法正常工作我的 HTML 网页上的链接中的选项卡在 IE8 中无法正常工作。他们在 IE9、safari、Firefox、opera 等中工作。

IE 中的问题是单击选项卡时它不会打开。

HTML:

div id="tab2" class="css-tabs">
        <ul class="noint11_menu">
            <li id="item-1"> <a href="#item-1">Shipping</a>
                <div>
                    <p><img id="shippingtable" src="http://www.ubreakirepair.com/ebaysite/images/shippingtable.png"/></p>
                    <div class="footer">----------</div>
                </div>
            </li>
            <li id="item-2"> <a href="#item-2">Payment</a>
                <div>
                    <p>Tab Content 2</p>
                     <div class="footer">---------</div>
                </div>                
            </li>
            <li id="item-3"> <a href="#item-3">Returns</a>
                <div id="notice">
                    <p>content </p>
                    <div class="footer">---------</div>
                </div>
            </li>
            <li id="item-4" title="click for Tab 4"> <a href="#item-4">Tab 4</a>
                <div>
                    <p>Tab Content 4</p>
                    <div class="footer">------------</div>
                </div>
            </li>
        </ul>
    </div></td>

CSS:

.css-tabs {
    position: relative;
    text-align: left; /* This is only if you want the tab items at the center */
    height: auto;
    margin-left:-30px;
    display: 
}
.css-tabs ul.noint11_menu {
    list-style-type: none;
    display: inline-block; /* Change this to block or inline for non-center alignment */
}
.css-tabs ul.noint11_menu > li {
    display: block;
    float: left;
}
.css-tabs ul.noint11_menu li > a {
    color: #EEEEEE;
    text-shadow: 1px 1px 1px #000;
    font-family: 'MuliLight', Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    display: block;
    text-align: center;
    border: 1px solid #002232;
    padding: 5px 10px 5px 10px;
    margin-right: 10px;
    -moz-user-select: none;
    cursor: pointer;
    background: #014464;

}
.css-tabs ul.noint11_menu li > div {
    display: none;
    position: absolute;
    width: 100%;
    left: 0;
    color: #ccc;
    text-align: left;
    padding: 0;
    margin-left: 32px;
    background: #181818 /* added this */;
    height:350px

}
.css-tabs ul.noint11_menu li > div > p {
    border: transparent;
    padding: 10px;
    margin: 0;
}
.css-tabs ul.noint11_menu li > a:focus {
    border-bottom: 1px solid #fff;
}
.css-tabs ul.noint11_menu li:target > a {
    cursor: default;
    border-bottom: 1px solid #fff;
}
.css-tabs ul.noint11_menu li:target > div {
    display: block;
}
#item-1 div {display: block}
#item-2 div { height:535px}
#item-3 div { height:535px}
#item-4 div { height:535px}



.footer{color:#fff; text-align:center}​

Answer 1

IE8 does not support :target ，这是您显示这些选项卡所依赖的。

我相信您最好的选择是将选项卡内容分成不同的页面，并在顶部使用一组链接进行导航。您的导航链接可以设置为看起来像标签的样式，因此网站看起来仍然相同 - 您只需在单击每个标签后加载一个页面。

即使对于使用现代浏览器的用户来说，这种替代方案也不会那么令人困惑，因为他们的后退和前进按钮在浏览网站时会以可预测的方式运行。

:target 更好地用于突出显示用户在单击部分链接后跳转到的页内 anchor 。使用它来伪造一个选项卡控件，其中隐藏了页面中的大量主要内容，这似乎不是很容易访问或用户友好。