Javascript 仅在Internet Explorer 8中，菜单选项卡无法正常工作

菜单选项卡仅在Internet Explorer 8中无法正常工作菜单选项卡仅在Internet Explorer 8中无法正常工作我的HTML网页上上面链接中的选项卡在IE8中无法工作。它们在IE9、safari、Firefox、opera等领域都有应用

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

HTML:

，这是您显示这些选项卡的依据

我相信你最好的选择是将标签内容分成不同的页面，并在顶部使用一组链接进行导航。你的导航链接可以设计成标签的样式，这样网站看起来还是一样的——点击每个标签后你就可以加载页面了

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

---

：target

更好地用于突出显示用户在单击节链接后跳转到的页面锚定。使用它来伪造隐藏页面中大量主要内容的选项卡控件似乎不是很容易访问或用户友好。

您试图使用的CSS功能

：target

，在IE8中不受支持

如果您想支持较旧的浏览器，最好的解决方案是重新考虑您的导航设计，这样它就不会使用那些浏览器中不存在的现代浏览器功能

但是，如果您确实需要使用此功能，则可以从中获得一些帮助。这是一个polyfill脚本，它为IE的旧版本添加了对多种现代CSS选择器的支持

这包括

：target

选择器，因此从理论上讲，将Selectivizr添加到站点应该可以解决您的问题。（但是请注意，在

：target

的情况下，Selectivizr只支持IE8；如果您还需要支持IE7或IE6，它将不起作用——即使Selectivizr也只能使用它所提供的功能）

---

（还请注意，Selectivizr要求您还包括一个支持库，如jQuery；我注意到您的页面目前根本没有任何javascript，因此这可能是一个相当大的负担，需要添加，但您至少可以通过使用条件注释对其进行编码来最小化影响，这样它只能由IE8加载）

如何复制此列表。他们只使用css：他们在IE8中使用JS作为选项卡。

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-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}​