Question

我正在使用引导程序尝试进行Tab淡入淡出。那部分正在工作。在选择活动班级时，我不能只选择一个班级。当我使用当前的JQuery时，它只会将活动类的第一个元素设为“ hello world”。我最终希望将.active文本放在页面上的容器中。我将如何去做呢？这样做似乎很简单。

我已经尝试过将.active类放入变量中，也尝试过使用其他CSS选择器，但它们都不起作用。

$('.tab-content>.active').html("Hello world");

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1252">
</head>

<body>
  <header>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link href="Test2.css" rel="stylesheet">

  </header>
  <nav class="nav"><span style="font-size: 30px; height: 30%">
            <ul>
              <li> <a href="#">Abab</a></li>
              <li> <a href="#">BABA</a></li>
              <li> <a href="#">CDCDC</a></li>
              <li> <a href="#">EDED</a></li>
            </ul>
          </span> </nav>
  <!--This is where jquery would interact with buttons if I need them but for this site's purposes I don't need it <button type="button" class="btn btn-primary btn-small" id="button">Make
          text bigger</button>
          
         <button type="button" class="btn btn-success btn-small" id="button123">Make
          text smaller</button> -->

  <!--I need to use media queries with my CSS so that all of these show up or change the flex div-->

  <button id="button">Click here</button>
  <ul class="nav nav-tabs" role="tablist" id="Exampletabs">
    <li><a href="#Article1" role="tab" data-toggle="tab">Article 1</a></li>
    <li><a href="#Article2" role="tab" data-toggle="tab">Article 2</a></li>
    <li><a href="#Article3" role="tab" data-toggle="tab">Article 3</a></li>
    <li><a href="#Article4" role="tab" data-toggle="tab">Article 4</a></li>
  </ul>
  <!--Tab panes-->
  <div class="tab-content">
    <div class="tab-pane active" id="Article1"> This is a test of my typing ability. I can type pretty fast.<br>

      <p>How are you? I am doing well. I am a nouveau writer. So, don't take it personally if I suck.</p>
    </div>
    <div class="tab-pane" id="Article2"> BBBB </div>
    <div class="tab-pane" id="Article3"> CCC</div>
    <div class="tab-pane" id="Article4"> DDD</div>
  </div>


  <section id="page">
    <section id="container">

      <h1>Hello world!</h1>

      <p>Check out my skills. I have mad coding skills. I am the best. There is no one else out there like me. Any of the articles that appear in the articles section above will appear below, and, I have several pages that you can go through that all lead
        the same place. </p>

      <br>

      <p>You can click on the article sections to see different previews of my website. I hope to write many more movie reviews as time goes on. I also hope to add in some analysis about news, tech and politics. I was after all a Political Science and Communication
        major while I was in College. I can't break bad habits.</p>

    </section>
  </section>


  <p>Hello world!!!</p>
  </div>

  <ul class="pager" style="margin-right: 700px">
    <li><a href="#Article1">1</a></li>
    <li><a href="#Article2">2</a></li>
    <li><a href="#Article3">3</a></li>
    <li><a href="#Article4">4</a></li>
    <li><a href="#Article5">5</a></li>
  </ul>
</body>

</html>

Answer 1

您的查询选择器应为$('div.tab-content>.active').html("Hello world");

这应该在更新活动标签后调用：

// first time update
$('div.tab-content>.active').html("Hello world");

// update after some tab is active
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  $('div.tab-content>.active').html("Hello world");
});

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1252">
</head>

<body>
  <header>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  </header>
  <nav class="nav"><span style="font-size: 30px; height: 30%">
            <ul>
              <li> <a href="#">Abab</a></li>
              <li> <a href="#">BABA</a></li>
              <li> <a href="#">CDCDC</a></li>
              <li> <a href="#">EDED</a></li>
            </ul>
          </span> </nav>
  <!--This is where jquery would interact with buttons if I need them but for this site's purposes I don't need it <button type="button" class="btn btn-primary btn-small" id="button">Make
          text bigger</button>
          
         <button type="button" class="btn btn-success btn-small" id="button123">Make
          text smaller</button> -->

  <!--I need to use media queries with my CSS so that all of these show up or change the flex div-->

  <button id="button">Click here</button>
  <ul class="nav nav-tabs" role="tablist" id="Exampletabs">
    <li><a href="#Article1" role="tab" data-toggle="tab">Article 1</a></li>
    <li><a href="#Article2" role="tab" data-toggle="tab">Article 2</a></li>
    <li><a href="#Article3" role="tab" data-toggle="tab">Article 3</a></li>
    <li><a href="#Article4" role="tab" data-toggle="tab">Article 4</a></li>
  </ul>
  <!--Tab panes-->
  <div class="tab-content">
    <div class="tab-pane active" id="Article1"> This is a test of my typing ability. I can type pretty fast.<br>

      <p>How are you? I am doing well. I am a nouveau writer. So, don't take it personally if I suck.</p>
    </div>
    <div class="tab-pane" id="Article2"> BBBB </div>
    <div class="tab-pane" id="Article3"> CCC</div>
    <div class="tab-pane" id="Article4"> DDD</div>
  </div>


  <section id="page">
    <section id="container">

      <h1>Hello world!</h1>

      <p>Check out my skills. I have mad coding skills. I am the best. There is no one else out there like me. Any of the articles that appear in the articles section above will appear below, and, I have several pages that you can go through that all lead
        the same place. </p>

      <br>

      <p>You can click on the article sections to see different previews of my website. I hope to write many more movie reviews as time goes on. I also hope to add in some analysis about news, tech and politics. I was after all a Political Science and Communication
        major while I was in College. I can't break bad habits.</p>

    </section>
  </section>


  <p>Hello world!!!</p>
  </div>

  <ul class="pager" style="margin-right: 700px">
    <li><a href="#Article1">1</a></li>
    <li><a href="#Article2">2</a></li>
    <li><a href="#Article3">3</a></li>
    <li><a href="#Article4">4</a></li>
    <li><a href="#Article5">5</a></li>
  </ul>
</body>

</html>

Answer 2

我找到了解决方案！！有点。好吧，这是到目前为止我提出的最好的解决方案。这使我可以使用#container元素，并且意识到可以在HTML中使用Jquery选择器。这为我省去了很多麻烦，并开辟了使用jQuery的新方法。 :)你们去。我很高兴能够在这里找到解决方案，并感谢imudin07的帮助！

$('div.tab-content>.active').html("Hello world");

// update after some tab is active
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  $("#container").html($('div.tab-content>.active'));
});

现在，我只需要弄清楚如何获取代码，以便在单击四个不同的时间后重置代码。否则它将在最后一次卡住。

我怎样才能使.active类通过jquery动态化，而不仅仅是关注第一个？

2 个答案: