2017-06-21 45 views
-1

我有被点击时应该“弹出”是隐藏一个div一个锚标记喜爱程度jQuery来定位标记

<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成功?

+0

试试这个你点击'$内($(本).attr( “HREF”))显示()。 ' –

+0

要显示隐藏的div,你首先需要隐藏它:)。在click函数之前使用'hide()',可以在css中使用'display:none'。其次,你有一个'href'属性将它链接到div的id。为什么不使用它? –

回答

0

您可以通过使用$(this).attr("href")得到href值,因为hrefattribute

$('#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>

0

试试这个

$('#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>