Selector Code

Select menu item to show content bootstrap

by Susan Delgado

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-4 col-xs-4">
      <div>
        <table class="selector">
          <tbody>
            <tr>
              <td valign="top">
                <ul class="menu-selector nav __web-inspector-hide-shortcut__">
                  <li class=""><a href="#p1" data-toggle="tab" aria-expanded="false">Lorem</a></li>
                  <li class=""><a href="#p2" data-toggle="tab" aria-expanded="false">Pa La Lorem</a></li>
                  <li class=""><a href="#p3" data-toggle="tab" aria-expanded="false">Lorem Lorem</a></li>
                  <li class=""><a href="#p4" data-toggle="tab" aria-expanded="false">Ipsom Lorem</a></li>
                  <li class=""><a href="#p5" data-toggle="tab" aria-expanded="false">Lorem sterlin</a></li>
                  <li class="active"><a href="#p6" data-toggle="tab" aria-expanded="true">De Lorem</a></li>
                </ul>
              </td>
            </tr>
          </tbody>
        </table>

      </div>

    </div>
    <div class="col-md-6 col-sm-6 col-xs-6">
      <div class="tab-content">
        <div id="p1" class="tab-pane fade">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
            in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          <p>
            <a href="/fellows/the-conference/housing-and-travel">Learn More &gt;</a>
          </p>
        </div>
       ...

JavaScript

$('.menu-selector a').click(function(event) {
    /* Act on the event */
    if ($('.data-postImg')) {
      // console.log('true');
      var postImage = $(this).attr('data-postImg');
      $('.PostImage').attr('src', postImage);
    }
  });