bootstrap - 在标签下方打开div

Question

我有这个代码。我希望能够在li a标记下方打开div内容。怎么可能？

FIDDLE

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