Question

我有一个菜单列表如下：

<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 resp。我使用的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>

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

Answer 1

使用CSS

#tablist li:first-child {
   background-color: #0094ff;
}

Answer 2

这是你想要使用的：

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

<强> jsFiddle

Answer 3

解决方法非常简单，如果您检查了console，肯定会出现JS错误。您缺少LI元素的ID，因此无法使用getElementById()使第一个LI变为粗体。

这是一个可以使用的更新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更快（参见其他答案）。

Answer 4

如果您允许使用JQuery：

$(document).ready(function() {
    $('#tablist>li').first().css( "font-weight", "bold" );
})

Answer 5

您可以使用以下代码来实现此目的，

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

Check Demo

我正在使用jquery version1.9.1

无法突出显示菜单列表的第一个元素

5 个答案: