如何編寫一個無序列表以便在懸停時顯示數據？

Question

這很難解釋。所以，我會舉一個例子。

http://www.genesee.edu/

這是我大學的網站。在最底層，有一個聯繫信息的區域。如果將鼠標懸停在上面，它會顯示該位置的電話號碼和內容。

我想弄清楚這個功能被稱爲什麼，我怎麼能腳本到我的網站。

Answer 1

在這種情況下，他們使用引導Navs：

<ul class="nav nav-tabs"> 
<li class="active"> 
    <a href="#">Home</a> 
</li> 
<li><a href="#">...</a></li> 
<li><a href="#">...</a></li> 
</ul> 

http://twitter.github.com/bootstrap/components.html#navs

自舉Tabs：

$('#myTab a').click(function (e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
}) 

http://twitter.github.com/bootstrap/javascript.html#tabs

在這個頁面的root.min.20120719035512.js：

function hideCampusAddress() { 
    $("div.campusInfo").each(function() { 
     $(this).hide() 
    }) 
} 

function toggleCampusAddress(b) { 
    var a = "div#pop_" + b; 
    hideCampusAddress(); 
    $("div#showCampusInfo").html(function() { 
     return $(a).html() 
    }) 
} 

$(document).ready(function() { 
    $("ul#campus-selector li a").each(function() { 
     $(this).mouseover(function() { 
      nameArr = $(this).attr("id").split("_"); 
      toggleCampusAddress(nameArr[1]); 
      $(this).parents().siblings().each(function() { 
       $(this).children().removeClass("active") 
      }); 
      $(this).addClass("active") 
     }) 
    }); 
    hideCampusAddress(); 
    toggleCampusAddress("Batavia"); 
    $("#sel_Batavia").toggleClass("active"); 
}); 

並從頁面來源：

<h3>Locations</h3> 
<ul id="campus-selector" class="nav nav-tabs"> 
    <li class="vcard"><a class="org" href="/albion/" id="sel_Albion">Albion</a> 
    <div id="pop_Albion" class="campusInfo"> 
     <div class="adr">456 West Ave Albion, NY 14411</div> 
     <div class="tel">(585) 589-4936</div> 
     <div class="email"><a href="mailto:albion@genesee.edu">albion@genesee.edu</a></div> 
    </div> 
    </li> 
    <li class="vcard"><a class="org" href="/arcade/" id="sel_Arcade">Arcade</a> 
    <div id="pop_Arcade" class="campusInfo"> 
     <div class="adr">25 Edward Street</div> 
     <div class="tel">(585) 492-5265</div> 
     <div class="email"><a href="mailto:arcade@genesee.edu">arcade@genesee.edu</a></div> 
    </div> 
    </li> 
    <li class="vcard"><a class="org" href="/about/" id="sel_Batavia">Batavia</a> 
    <div id="pop_Batavia" class="campusInfo"> 
     <div class="adr">One College Rd Batavia, NY 14020</div> 
     <div class="tel">(585) 343-0055 | (866) CALL-GCC</div> 
    </div> 
    </li> 
    <li class="vcard"><a class="org" href="/dansville/" id="sel_Dansville">Dansville</a> 
    <div id="pop_Dansville" class="campusInfo"> 
     <div class="adr">31 Clara Barton St</div> 
     <div class="tel">(585) 335-7820</div> 
     <div class="email"><a href="mailto:dansville@genesee.edu">dansville@genesee.edu</a></div> 
    </div> 
    </li> 
    <li class="vcard"><a class="org" href="/lima/" id="sel_Lima">Lima</a> 
    <div id="pop_Lima" class="campusInfo"> 
     <div class="adr">7285 Gale Rd</div> 
     <div class="tel">(585) 582-1226</div> 
     <div class="email"><a href="mailto:lima@genesee.edu">lima@genesee.edu</a></div> 
    </div> 
    </li> 
    <li class="vcard"><a class="org" href="/medina/" id="sel_Medina">Medina</a> 
    <div id="pop_Medina" class="campusInfo"> 
     <div class="adr">11470 Maple Ridge Rd</div> 
     <div class="tel">(585) 798-1688</div> 
     <div class="email"><a href="mailto:medina@genesee.edu">medina@genesee.edu</a></div> 
    </div> 
    </li> 
    <li class="vcard"><a class="org" href="/warsaw/" id="sel_Warsaw">Warsaw</a> 
    <div id="pop_Warsaw" class="campusInfo"> 
     <div class="adr">115 Linwood Avenue</div> 
     <div class="tel">(585) 786-3010</div> 
     <div class="email"><a href="mailto:warsaw@genesee.edu">warsaw@genesee.edu</a></div> 
    </div> 
    </li> 
    <li class="vcard" id="footer_dl"><a class="org" href="/depts/dl/" id="sel_Online">eLearning</a> 
    <div id="pop_Online" class="campusInfo"> 
     <div class="adr">eLearning</div> 
     <div class="tel">(585) 345-6969</div> 
     <div class="email"><a href="mailto:online@genesee.edu">online@genesee.edu</a></div> 
    </div> 
    </li> 
    <li class="vcard" id="footer_hs"><a class="org" href="/depts/ace/" id="sel_HighSchool">High School</a> 
    <div id="pop_HighSchool" class="campusInfo"> 
     <div class="adr">Accelerated College Enrollment (ACE)</div> 
     <div class="tel">(585) 345-6801 </div> 
     <div class="email"><a href="mailto:ACE@genesee.edu">ACE@genesee.edu</a></div> 
    </div> 
    </li> 
</ul> 
<div id="showCampusInfo"></div>