如何使用 jquery 使 .active 类动态化，而不仅仅是专注于第一个类

我正在使用引导程序来尝试做制表符淡入淡出。这部分正在发挥作用。在选择活动类时，我不能选择的不仅仅是一个。当我使用我当前的 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>

您的查询选择器应该$('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>

我找到了解决方案！！有点。嗯，这是我迄今为止提出的最佳解决方案。这让我可以使用 #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'));
});

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

相关内容

最新更新

热门标签：