Question

我已经研究过了，并且我正在努力解决这个问题非常困难（这里的noob html编码器）

到目前为止，我已经开始使用数据切换选项卡，但我如何将数据纳入一个选项卡仍然让我感到困惑，

在下面的代码中，从“问候”到“heres my facebook”的所有内容都必须涉及到我的所有内容

然后在“我的事业”下我会提出其他事情

<!DOCTYPE html>
<html>

<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}

#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:1024px;
    width:100px;
    float:left;
    padding:5px;              

}
#section {
    width:700px;
    float:left;
    padding:10px;        
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;      
}

#linespacing1 {
text-align:500px;

}

</style>
</head>

<div id="header">
<h1>Kulkarni Industries (K.I)</h1>
</div>

<div id="nav">

<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>

<div class="container">
<div id="linespacing1">
  <ul class="list-inline">
  <ul class="nav nav-tabs">
  <div style="text-align:center;margin-left:0px;">
   <li class="active"> <a data-toggle="tab" href="#menu1">All about me</a> </li>
   <li class="active"> <a data-toggle="tab" href="menu2">My Businesses</a> </li>
  </ul>
</div>



    <p>
    <div style="text-align:center;margin-left:-50px;">

    Greetings!

</div>
    </p>



<div style="text-align:center; margin-left:-50px;">

<h1>A little information about me </h1>


    <p>

    Welcome to my world ;D

    </p>


    <p>

    Let me tell you a little about myself

    </p>
    <p>
    Heres a photo of me
    </p>

    <p>

    <body>

    <a href="https://www.facebook.com"> 

    <img src=file:///C:/Users/shank/Pictures/S5%20Photos/DCIM/Camera/Snapchat-7079236859296311049.jpg Width="200" height="300" />

    </a>    

    <p>

      Click on it and youll go to my Facebook
    </body>
    </p>

<div id="menu2" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>to .</p>
    </div>

</div>
</div>
</div>




</body>
</html>

Answer 1

试试这个（使用你的代码稍加修改）。基本上使用选项卡 - 您可以将所需的所有内容放入选项卡窗格中，该选项卡窗格具有您在选项卡导航菜单中列为href的ID。请注意在选项卡导航菜单中使用“＃”，该菜单以具有该ID的选项卡窗格为目标。所有选项卡窗格都包含在选项卡内容div中，活动选项卡导航和活动选项卡窗格将被赋予“活动”类。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
    margin-bottom:30px;
}

#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:1024px;
    width:100px;
    float:left;
    padding:5px;              

}
#section {
    width:700px;
    float:left;
    padding:10px;        
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;      
}

#linespacing1 {
text-align:500px;

}
</style>
</head>
<body>
<div id="header">
    <nav>
        <h1>Kulkarni Industries (K.I)</h1>
    </nav>
</div>
<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"> <a data-toggle="tab" href="#menu1">All about me</a> </li>
        <li> <a data-toggle="tab" href="#menu2">My Businesses</a> </li>
    </ul>
<div class="tab-content">
    <div class="tab-pane fade in active " id="menu1" style="padding:15px">
        <div class="col-sm-6">
            <p>Greetings!</p>
            <h1>A little information about me </h1>
            <p>Welcome to my world ;D</p>
            <p>Let me tell you a little about myself</p>
        </div>

        <div class="col-sm-6">
        <p>Heres a photo of me</p>
            <a href="https://www.facebook.com"> 
                <img src="file:///C:/Users/shank/Pictures/S5%20Photos/DCIM/Camera/Snapchat-7079236859296311049.jpg"   width="200" height="300" alt="a picture of me" />
            </a>    
             <p>Click on it and youll go to my Facebook page</p>
        </div>
    </div>

    <div class="tab-pane fade " id="menu2" style="padding:15px">
      <h3>My Businesses</h3>
      <p>other content</p>
    </div>
</div><!--tab content-->
</div><!--container-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

单击选项卡时在选项卡中定义什么

1 个答案: