0

説明するのはちょっと難しいです。というわけで、例を挙げます。

http://www.genesee.edu/

これは私の大学のウェブサイトです。最下部には、連絡先情報の領域があります。マウスをその上に置くと、その場所の電話番号などが表示されます。

この機能の名前と、それを自分の Web サイトにスクリプト化する方法を理解しようとしています。

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 に答える