如何使用html超链接调用特定的div

时间:2011-05-09 10:34:11

标签: jquery asp.net html

我想使用超链接调用特定的div。这是我的代码:

 <div id="mainNavPane">
    <ul id="sideSubNav">

        <li><a href="#" class="prim">Individuals</a></li>
        <li><a href="#" class="view">Individuals1</a></li>
    </ul>
</div>

<div id="mainScrollPane">

    
         

  <!-- 1-5 -->
  <div id="homeScreen" class="screen">
     <div class="arrowLeft" style="width:50px;"><a class="prev"><img src="../images/btn-ArrowPrev.gif"/></a></div>
    <img src="images/bg-HomeScreen.jpg" height=50px width=50px />
     <div class="arrowRight" style="width:50px;"><a class="next"><img src="../images/btn-ArrowNext.gif" /></a></div>
  </div>

   <!-- 5-10 -->
  <div id="IndividualsScreen" class="screen">
     <h2>Individuals using Breaking Free Online</h2>
     <div class="arrowLeft" style="width:50px;"><a class="prev"><img src="../images/btn-ArrowPrev.gif" /></a></div>
     <div class="screenBody" style="width:460px;">
      <ul>
          <li>If you are struggling to control your drinking or use of drugs, Breaking Free Online
              offers you treatment that is immediate, confidential and effective – even if your
              dependence is severe and has been for a long time </li>
          <li>You can take advantage of the treatment at home or anywhere with an internet connection,
              and at the times that are most convenient for you, because it is available online
              24 hours a day </li>
           </ul>
      </div>
      <div class="arrowRight" style="width:50px;"><a class="next"><img src="../images/btnArrowNext.gif" /></a></div>
  </div>   
    </div>

我希望在div id = individualscreen显示<a href="#" class="prim">Individuals</a>

的同时点击<a href="#" class="view">Individuals1</a>超链接时显示div id=homescreen

2 个答案:

答案 0 :(得分:3)

只需使用#后跟元素的id:href="#individualscreen"

答案 1 :(得分:1)

如果您想导航到div,可以关注David Dorward的例子。

如果您想在点击链接时隐藏/显示div,您可以执行以下操作:

$(function() {
  $('#prim').click(function(e) {
    e.preventDefault();
    $('#individualscreen').toggle();
  });
});