Question

有点难以解释。所以，我举一个例子。

http://www.genesee.edu/

这是我学院的网站。在最底部，有一个联系信息区域。如果您将鼠标悬停在它上面，它会显示该位置的电话号码和内容。

我正在试图找出这个功能的名称，以及如何将其编入我的网站。

Answer 1

在这种情况下，他们使用的是Bootstrap 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

使用Bootstrap 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>

如何编写无序列表以在悬停时显示数据？

1 个答案: