Question

我有一个锚标记，点击后应弹出＆＃39;一个隐藏的div

<a href="#myAnchor" rel="" id="anchor1" class="anchorLink">read more</a>
when read more is clicked, just below it this div should show, 
<div id="myAnchor" name="d-content">
              <div class="col-sm-12">
                  <ul>
                    <li>item one</li>
                    <li>item two</li>
                  </ul>
              </div>
        </div>
I have a JQuery code that isn't working as expected,
    <script>
  $('#anchor1').click(function(){
    $('#myAnchor').show();
});
</script>

如何成功显示隐藏的div？

Answer 1

您可以使用href获取$(this).attr("href")值，因为href是attribute。

$('#anchor1').click(function() {
  $($(this).attr("href")).show();
});

#myAnchor {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#myAnchor" rel="" id="anchor1" class="anchorLink">read more</a> 
<div id="myAnchor" name="d-content">
  <div class="col-sm-12">
    <ul>
      <li>item one</li>
      <li>item two</li>
    </ul>
  </div>
</div>

Answer 2

尝试这个

$('#anchor1').click(function() {
  $('#myAnchor').show();
});

#myAnchor{
  display:none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#myAnchor" rel="" id="anchor1" class="anchorLink">read more</a> when read more is clicked, just below it this div should show,
<div id="myAnchor" name="d-content">
  <div class="col-sm-12">
    <ul>
      <li>item one</li>
      <li>item two</li>
    </ul>
  </div>
</div>

喜欢JQuery来锚定标签

2 个答案: