问答详情
源自:3-13 编程练习

求大神帮我看下为什么我这个代码不是直接显示第二项,哪的问题呢?找了半天没找出问题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello World</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<style>
        body {
            padding: 20px;
        }
</style>

</head>

<body>
<ul class="nav nav-tabs" role="tablist" id="myTab">
  <li><a href="#num1" role="tab" data-toggle="tab">第一项</a></li>
  <li><a href="#num2" role="tab" data-toggle="tab">第二项</a></li>
  <li><a href="#num3" role="tab" data-toggle="tab">第三项</a></li>
  <li><a href="#num4" role="tab" data-toggle="tab">第四项</a></li>
</ul>

<div>
  <div class="tab-pane active" id="num1">
    <p>慕课网是一家从事互联网免费教学的网络教育公司。秉承"开拓、创新、公平、分享"的精神,
将互联网特性全面的应用在教育领域,致力于为教育机构及求学者打造一站式互动在线教育品牌</p>
  </div>
  <div id="num2">
    <p>慕课网是做什么的?<br>互联网技能教育,免费的哦</p>
  </div>
  <div id="num3">
    <p>慕课网都有哪些讲师?课程质量高吗?<br>学了就知道,我们不爱吹,低调是最牛逼的炫耀</p>
  </div>
  <div id="num4">
    <p>我在慕课网学习能得到什么?<br>屌丝逆袭不是传说,但关键是你学不学</p>
  </div>
</div>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<script>
  $((document).ready(function(){
      $('#myTab a[href="#num2"]').tab('show');  
    })
</script>
</body>
</html>

提问者:crake 2016-08-01 15:47

个回答

  • TortoiseChen
    2016-08-01 16:16:49
    已采纳

    下面三个id为num1 num2 num3的div缺少了tab-pane类,感觉像这个原因

  • 四娃
    2017-07-18 15:25:46

    <div class="tab-pane active" id="num1">中active就是选中的意思,教程加在了第一项的div里,把这个改加在第二项上就可以了,上面第二个选项<li>也要加

  • crake
    2016-10-18 22:58:56

    呃,好吧