Question

html代码：

<head>
    <meta charset="utf-8">

    <title>Article Thumbnails - Bootsnipp.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        /* image thumbnail */
.thumb {
    display: block;
    width: 100%;
    margin: 0;
}

/* Style to article Author */
.by-author {
    font-style: italic;
    line-height: 1.3;
    color: #aab6aa;
}


.featured-article {
    width: 482px;
    height: 350px;
    position: relative;
    margin-bottom: 1em;
}

.featured-article .block-title {
    /* Position & Box Model */
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    /* background */
    background: rgba(0,0,0,0.7);
    /* Width/Height */
    padding: .5em;
    width: 100%;
    /* Text color */
    color: #fff;
}

.featured-article .block-title h2 {
    margin: 0;
}



.main-list {
    padding-left: .5em;
}

.main-list .media {
    padding-bottom: 1.1em;

}    </style>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">

    <div class="row">


        <div class="col-md-3 col-lg-3">
            <ul class="media-list main-list">
              <li class="media">

                <div class="media-body">
                  <h4 class="media-heading">Area Chart</h4>

                </div>
              </li>
              <li class="media">

                <div class="media-body">
                  <h4 class="media-heading">Line Chart</h4>

                </div>
              </li>
              <li class="media">

                <div class="media-body">
                  <h4 class="media-heading">Scatter chart</h4>

                </div>
              </li>
            </ul>
        </div>



               <div class="col-md-9 col-lg-9">
            <!-- artigo em destaque -->
            <div class="featured-article">
                <a href="#">
                    <img src="http://placehold.it/482x350" alt="" class="thumb">
                </a>

            </div>

        </div>

    </div><script type="text/javascript">
</script>
</body>

在上面的代码中我有左侧的菜单项，你可以看到，每当我点击任何菜单项时。我想在右侧加载其特定的div内容使用bootstrap jQuery.i试过但它不起作用。帮助将不胜感激？

使用Jquery在单击菜单项上加载动态内容？

0 个答案: