bootstrap-在標簽下方打開div

Question

我有這個代碼。 我希望能夠在li a標簽下面打開div內容。 這怎么可能？

小提琴

  $(document).ready(function() { $('.nav ul li:first').addClass('active'); $('.tab-content:not(:first)').hide(); $('.nav ul li a').click(function(event) { event.preventDefault(); var content = $(this).attr('href'); $(this).parent().addClass('active'); $(this).parent().siblings().removeClass('active'); $(content).show(); $(content).siblings('.tab-content').hide(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-xs-12"> <div class=row> <div class="col-xs-12"> <div class="nav"> <ul> <li><a href="#a">Option A</a> </li> <li><a href="#b">Option B</a> </li> <li><a href="#c">Option C</a> </li> </ul> </div> </div> <div class="col-xs-12"> <div id="a" class="tab-content"> <h2>Option A</h2> <p>Option A</p> </div> <div id="b" class="tab-content"> <h2>Option B</h2> <p>Option B</p> </div> <div id="c" class="tab-content"> <h2>Option C</h2> <p>Option C</p> </div> </div> </div> </div> 

Answer 1

  var positioning = function ($li) { if ($li.css('position') == 'relative') { var pos = $li.position(); $($li.find('a:first').attr('href')).css({ position: "absolute", top: pos.top + "px", left: pos.left + "px" }); } }; $(document).ready(function () { positioning($('.nav ul li:first').addClass('active')); $('.tab-content:not(:first)').hide(); $('.nav ul li a').click(function (event) { event.preventDefault(); var content = $(this).attr('href'); $(this).parent().addClass('active'); $(this).parent().siblings().removeClass('active'); $(content).parents('.content').find('.tab-content').hide(); positioning($(this).parent()); $(content).show(); }); }); 

  @media (max-device-width: 479px) { .nav li.active { position: relative; min-height: 100px; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-xs-12"> <div class=row> <div class="col-xs-12"> <div class="nav"> <ul> <li> <a href="#a">Option A</a> </li> <li> <a href="#b">Option B</a> </li> <li> <a href="#c">Option C</a> </li> </ul> </div> </div> <div class="col-xs-12 content"> <div id="a" class="tab-content"> <h2>Option A</h2> <p>Option A</p> </div> <div id="b" class="tab-content"> <h2>Option B</h2> <p>Option B</p> </div> <div id="c" class="tab-content"> <h2>Option C</h2> <p>Option C</p> </div> </div> </div> </div>