javascript - 如何使用 jquery 使 .active 类动态化，而不仅仅是关注第一个？

标签 javascript jquery html css

我正在使用 bootstrap 来尝试进行制表符淡入淡出。那部分正在工作。在选择事件类(class)时，我只能选择一个。当我使用我当前的 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>

关于javascript - 如何使用 jquery 使 .active 类动态化，而不仅仅是关注第一个？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54384482/

上一篇：html - 如何在不破坏它们的情况下对齐 CSS slider 开关

下一篇：javascript - 没有id的div的淡入效果

相关文章：

android - Phonegap + Android - 链接到本地​​ HTML 时出错

html - 屏蔽内容以并排获取图像的高度

javascript - 如何防止 webpack 在 eslint 错误上构建失败？

php - 每次点击 href 使用 jquery 显示相同的 DIV

javascript - 字符串过滤。需要去掉&lt;style&gt;标签及其内容，只保留<body>中的内容

javascript - 如何使用jstree更改按钮单击时节点的位置？

javascript - 我想用 Jquery AciTree 迭代选中的复选框

javascript - Javascript 中的自定义打印预览

javascript - 防止提交空白输入和文本区域

javascript - 仅使用对象的引用从数组中删除对象

©2024 IT工具网  联系我们