Невозможно выделить первый элемент списка меню

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> 

О выберите пункт меню будет показывать Див 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 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 в качестве выбранного по умолчанию элемента при загрузке страницы. Пожалуйста, помогите. Спасибо заранее.

Answer 1

с помощью CSS

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

Answer 2

Это то, что вы хотите использовать:

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

jsFiddle

Answer 3

Решение этой проблемы довольно легко и ошибка JS, конечно, придумать если вы проверили свой console. Вам не хватает идентификаторов ваших элементов LI, поэтому вы не можете сделать первый 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> 

A рабочий 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