0

这有点难以解释。所以,我举个例子。

http://www.genesee.edu/

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

我试图弄清楚这个功能被称为什么,以及如何将它编写到我的网站中。

4

1 回答 1

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

使用引导程序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>
于 2012-09-29T05:36:05.023 回答