点击我的标签后内容不会改变。这是我的代码:
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/bootstrap.js"></script>
...
<div class="tabbable">
<ul class="nav nav-tabs" >
<li class="active"><a href="#tab1" data-toggle="tab">Hunts</a></li>
<li><a href="#tab2" data-toggle="tab">Great Outdoors</a></li>
<li><a href="#tab3" data-toggle="tab">Instructional</a></li>
</ul>
<div class="tab-content">
<ul id="tab1" class="tab-pane active"class='videolist'>
<li class='videolist'><iframe allowfullscreen="" frameborder="0" height="50" id="player" mozallowfullscreen="" src="http://player.vimeo.com/video/67860856" webkitallowfullscreen="" width="100"></iframe><span class='vidtext'>ddddddddddddddddddddddd99999</span></li>
<li class='videolist'><iframe allowfullscreen="" frameborder="0" height="50" id="player" mozallowfullscreen="" src="http://player.vimeo.com/video/66467447" webkitallowfullscreen="" width="100"></iframe><span class='vidtext'>ddddddddddddddddddddddd99999</span></li>
<li class='videolist'><iframe allowfullscreen="" frameborder="0" height="50" id="player" mozallowfullscreen="" src="http://player.vimeo.com/video/65989351" webkitallowfullscreen="" width="100"></iframe><span class='vidtext'>dsfdfsdfsdfsdf</span></li>
<li class='videolist'><iframe allowfullscreen="" frameborder="0" height="50" id="player" mozallowfullscreen="" src="http://player.vimeo.com/video/65442532" webkitallowfullscreen="" width="100"></iframe><span class='vidtext'>ddddddddddddddddddddddd99999</span></li>
<li class='videolist'><iframe allowfullscreen="" frameborder="0" height="50" id="player" mozallowfullscreen="" src="http://player.vimeo.com/video/64932895" webkitallowfullscreen="" width="100"></iframe><span class='vidtext'>dsfdfsdfsdfsdf</span></li>
<li class='videolist'><iframe allowfullscreen="" frameborder="0" height="50" id="player" mozallowfullscreen="" src="http://player.vimeo.com/video/64120939" webkitallowfullscreen="" width="100"></iframe><span class='vidtext'>ddddddddddddddddddddddd99999</span></li>
<li class='videolist'><iframe allowfullscreen="" frameborder="0" height="50" id="player" mozallowfullscreen="" src="http://player.vimeo.com/video/64028154" webkitallowfullscreen="" width="100"></iframe><span class='vidtext'>dsfdfsdfsdfsdf</span></li>
<li class='videolist'><iframe allowfullscreen="" frameborder="0" height="50" id="player" mozallowfullscreen="" src="http://player.vimeo.com/video/63489842" webkitallowfullscreen="" width="100"></iframe><span class='vidtext'>ddddddddddddddddddddddd99999</span></li>
<li class='videolist'><iframe allowfullscreen="" frameborder="0" height="50" id="player" mozallowfullscreen="" src="http://player.vimeo.com/video/60358260" webkitallowfullscreen="" width="100"></iframe><span class='vidtext'>dsfdfsdfsdfsdf</span></li>
</ul>
</div>
<div id="tab2" class="tab-pane" >
<p>Howdy, I'm in Section 2.</p>
</div>
<div id="tab3" class="tab-pane">
<p>Howdy, I'm in Section 3.</p>
</div>
</div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>
<script src="js/bootstrap.js"></script>
</script>
</div>
答案 0 :(得分:0)
以下HTML将使标签正常工作并更改内容。
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Hunts</a>
</li>
<li><a href="#tab2" data-toggle="tab">Great Outdoors</a>
</li>
<li><a href="#tab3" data-toggle="tab">Instructional</a>
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane active">
<p>Howdy, I'm in Section 1.</p>
</div>
<div id="tab2" class="tab-pane">
<p>Howdy, I'm in Section 2.</p>
</div>
<div id="tab3" class="tab-pane">
<p>Howdy, I'm in Section 3.</p>
</div>
</div>
</div>
然后只需将div中的内容更改为您需要的内容。
可在此处找到一个工作示例:http://jsfiddle.net/SOFiddles/ZcgSc/
答案 1 :(得分:0)
您需要将ul
括在这些代码中,然后移除id
,tab-pane
&amp;来自active
ul
个班级
<div id="tab1" class="tab-pane active">
<ul>
<li class='videolist'>
<iframe allowfullscreen="" frameborder="0" height="50" id="player" mozallowfullscreen="" src="http://player.vimeo.com/video/67860856" webkitallowfullscreen="" width="100"></iframe>
<span class='vidtext'>ddddddddddddddddddddddd99999</span>
</li>
</ul>
</div>
<强> FIDDLE 强>