1

我有一个菜单列表如下：

<ul id="tablist">
    <li><a class="tab" href="#" onclick="return expandcontent('sc1', this)">Menu1</a></li>
    <li><a class="tab" href="#" onclick="return expandcontent('sc2', this)">Menu2</a></li>
    <li><a class="tab" href="#" onclick="return expandcontent('sc3', this)">Menu3</a></li>
    <li><a class="tab" href="#" onclick="return expandcontent('sc4', this)">Menu4</a></li>
    <li><a class="tab" href="#" onclick="return expandcontent('sc5', this)">Menu5</a></li>
</ul>

单击菜单项时，它将分别显示 div sc1,sc2,sc3,sc4,sc5。我使用的javascript如下：

var initialtab=[1, "sc1"]

function cascadedstyle(el, cssproperty, csspropertyNS) {
    if (el.currentStyle)
        return el.currentStyle[cssproperty]
    else if (window.getComputedStyle) {
        var elstyle=window.getComputedStyle(el, "")
        return elstyle.getPropertyValue(csspropertyNS)
    }
}

var previoustab=""

function expandcontent(cid, aobject) {
    var links=document.getElementsByTagName("a");
    for(i=0;i<links.length;i++) {
        if(links[i].className=="tab") {
            links[i].style.fontWeight="normal";
        }
    }
    aobject.style.fontWeight="bold";
    if (document.getElementById) {
        highlighttab(aobject)
        detectSourceindex(aobject)
        if (previoustab!="")
            document.getElementById(previoustab).style.display="none"
        document.getElementById(cid).style.display="block"
        previoustab=cid
        if (aobject.blur)
            aobject.blur()
        return false
    } else
        return true
}

function highlighttab(aobject) {
    if (typeof tabobjlinks=="undefined")
        collecttablinks()
}

function collecttablinks() {
    var tabobj=document.getElementById("tablist")
    tabobjlinks=tabobj.getElementsByTagName("A")
}

function detectSourceindex(aobject) {
    for (i=0; i<tabobjlinks.length; i++) {
        if (aobject==tabobjlinks[i]) {
            tabsourceindex=i 
        }
    }
}

function do_onload() {
    var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname
    var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
    collecttablinks()
    initTabcolor=cascadedstyle(tabobjlinks[1], "fontWeight", "fontWeight")
    initTabpostcolor=cascadedstyle(tabobjlinks[0], "fontWeight", "fontWeight")
    if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck) {
        var cookieparse=get_cookie(cookiename).split("|")
        var whichtab=cookieparse[0]
        var tabcontentid=cookieparse[1]
        expandcontent(tabcontentid, tabobjlinks[whichtab])
    } else
        expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
    window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
    window.attachEvent("onload", do_onload)
else if (document.getElementById)
    window.onload=do_onload
</script>

div如下：

<div id="tabcontentcontainer">
<div id="sc1" class="tabcontent">
<span style="font-size:9pt; color:black;">Content 1 goes here</span>
</div>
<div id="sc2" class="tabcontent">
<img src="images/image.png"/>
</div>
<div id="sc3" class="tabcontent">
<span style="font-size:9pt; color:black;">Content 3 goes here</span>
</div>
<div id="sc4" class="tabcontent">
<span style="font-size:9pt; color:black;">Content 4 goes here</span>
</div>
<div id="sc5" class="tabcontent">
<span style="font-size:9pt; color:black;">Content 5 goes here</span>
</div>

我的问题是我无法在页面加载时将第一个菜单项突出显示为粗体，即我想在页面加载时将 Menu1 突出显示为默认选定项。请帮忙。提前致谢。

4

5 回答 5

1

这是您要使用的：

ul li:first-child {
   font-weight:bold;
}

jsFiddle

于 2013-10-07T12:33:04.650 回答
1

使用 CSS

#tablist li:first-child {
   background-color: #0094ff;
}
于 2013-10-07T12:30:37.377 回答
1

解决这个问题很简单，如果您检查控制台，肯定会出现 JS 错误。您缺少 LI 元素的 ID，因此您无法使用 . 将第一个 LI 设为粗体getElementById()。

这是一个更新的 HTML 代码，它可以工作：

<ul id="tablist">
<li><a class="tab" id="sc1" href="#" onclick="return expandcontent('sc1', this)">Menu1</a></li>
<li><a class="tab" id="sc2" href="#" onclick="return expandcontent('sc2', this)">Menu2</a></li>
<li><a class="tab" id="sc3" href="#" onclick="return expandcontent('sc3', this)">Menu3</a></li>
<li><a class="tab" id="sc4" href="#" onclick="return expandcontent('sc4', this)">Menu4</a></li>
<li><a class="tab" id="sc5" href="#" onclick="return expandcontent('sc5', this)">Menu5</a></li>
</ul>

一个工作的 JSFiddle：http: //jsfiddle.net/TSHVP/

根据您的目标浏览器，您甚至可以使用 CSS 选择器，这比在窗口加载时使用 JavaScript 更快（请参阅其他答案）。

于 2013-10-07T12:34:40.910 回答
1

如果您允许使用 JQuery：

$(document).ready(function() {
    $('#tablist>li').first().css( "font-weight", "bold" );
})
于 2013-10-07T12:35:17.553 回答
1

您可以使用下面的代码来实现这一点，

$("#tablist li:first").css('font-weight','bold');

检查演示

我正在使用 jquery version1.9.1

于 2013-10-07T12:37:12.647 回答