javascript - 指示另一个选项卡上的内容何时更改

转载作者：太空宇宙更新时间：2023-11-04 05:36:50

25

4

我有多个选项卡，但我想在用户未单击的另一个选项卡上发生更改时进行指示。例如，当用户在数据 Pane 中点击运行按钮时，我想将 Errors 选项卡更改为红色，以指示该选项卡也发生了更改 - 我该如何实现这个？ (相反，如果它们位于错误选项卡上，则数据选项卡应变为红色)。此外，一旦单击选项卡，我想删除红色。任何帮助表示赞赏!

期望的输出

runCode = () => {
   document.getElementById("dataOutput").innerHTML = "Paragraph changed!"
   document.getElementById("errorOutput").innerHTML = "Error Occured"
 }

.fab {
  width: 60px;
  height: 60px;
  background-color: #A7C0CD;
  border-radius: 50%;
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  transition: all 0.1s ease-in-out;
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: white;
  text-align: center;
  line-height: 58px;
  float: right;
  margin: 8px;
  z-index: 5000;
  position: absolute;
  right:0;
  top:0;
}

.fab:hover {
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  transform: scale(1.05);
}

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <head>
    <!-- Visual appearance -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap.min.js@3.3.5/bootstrap.min.js"></script>
  </head>
  <body>

<div class="fab" id="runCode" onclick="runCode();">RUN</div>
        <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#data">Data</a></li>
          <li><a data-toggle="tab" href="#error">Errors</a></li>
        </ul>

        <div class="tab-content">
          <div id="data" class="tab-pane fade in active">
            <div id="dataOutput"></div>
          </div>
          <div id="error" class="tab-pane fade">
            <div id="errorOutput"></div>
          </div>
        </div>

  </body>
</html>

最佳答案

我想我使用 MutationObserver 实现了您想要的。它相当脆弱，可以使用一些重构，但你明白我希望的要点:

// store a reference to our tabs as we're going to re-use them
const data = document.getElementById("dataOutput");
const error = document.getElementById("errorOutput");
const runCode = () => {
  data.textContent = "Paragraph changed!";
  error.textContent = "Error Occured";
};

// remove the 'changed' class from clicked tabs
const tabs = document.querySelector('.nav-tabs');
tabs.onclick = ({ target }) => target.classList.remove('changed');

// we're going to watch for mutations of our output-elements
new MutationObserver(observe).observe(data, { childList: true });
new MutationObserver(observe).observe(error, { childList: true })

function observe(mutations) {
  const target = mutations[0].target;
  // get the name of the changed tab by slicing of 'Output' from the target's id
  const tabName = target.id.slice(0, target.id.indexOf('O'));
  const tab = document.querySelector(`a[href="#${tabName}"]`);
 
  // give the 'changed' class to the tab related to the changed dom-node,
  // if it's not currently active
  if (!target.parentNode.classList.contains('active')) {
    tab.classList.add('changed');
  }
}

.fab {
  width: 60px;
  height: 60px;
  background-color: #A7C0CD;
  border-radius: 50%;
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  transition: all 0.1s ease-in-out;
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: white;
  text-align: center;
  line-height: 58px;
  float: right;
  margin: 8px;
  z-index: 5000;
  position: absolute;
  right:0;
  top:0;
}

.fab:hover {
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  transform: scale(1.05);
}

a.changed {
  color: red
}

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <head>
    <!-- Visual appearance -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap.min.js@3.3.5/bootstrap.min.js"></script>
  </head>
  <body>

<div class="fab" id="runCode" onclick="runCode();">RUN</div>
        <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#data">Data</a></li>
          <li><a data-toggle="tab" href="#error">Errors</a></li>
        </ul>

        <div class="tab-content">
          <div id="data" class="tab-pane fade in active">
            <div id="dataOutput"></div>
          </div>
          <div id="error" class="tab-pane fade">
            <div id="errorOutput"></div>
          </div>
        </div>

  </body>
</html>

关于javascript - 指示另一个选项卡上的内容何时更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59567686/

25

4

0

文章推荐： linux - 脚本编写 - 使用 While 循环迭代数字(newusers 命令)

文章推荐： c - Win32 应用程序中的窗口无法正常关闭

c++ - 如何在Windows异常处理程序中设置MMX寄存器以模拟不受支持的3DNow!指示
我正在尝试复兴使用3DNow的旧Win32游戏!指令集以进行3D渲染。在Win7-Win10等现代OS上，不允许FPADD或FPMUL之类的Win10指令，并且该程序将引发异常。自3DNow数量!
macports - 指示 Macports 下载但不安装端口的依赖项
我坐在机场这里，想出了一些我想尝试的东西，但如果 macports 下载-编译-下载-编译，我没有时间 sudo port install .但是，如果它下载了所有内容，那么我就可以在飞机上对其进行编
java - 指示 Jackson 从给定方法进行序列化
我使用的是 Jackson 库，而不是 2.6.3。我想在类中定义序列化方法，并且我想指示 Jackson 在序列化对象时调用此方法。例如 public interface AClass { d
javascript - 指示 jquery 内容表的顶部标题
我正在制作一个自动目录，一切正常。我只需要将顶部标题指定为“粗体” jQuery(document).ready(function(){ var ToC = "" + ""; var ne
javascript - 指示 html 对象的各种属性
我要设置 html 对象的属性。 var property1 = 'style.visibility'; var property2 = 'style.display'; var property3
c++ - 指示 Qi 转换属性失败的正确方法是什么？
在 boost::spirit::traits::transform_attribute 中指示解析失败的正确方法是什么？我可以抛出任何旧的异常，还是它要我做的特定事情？ namespace boos
android - 指示 XmlPullParser 的缓冲区大小
我正在使用 XmlPullParser 在移动设备上通过 http 逐渐加载一些数据。由于此类连接的速度通常可以低至 1KB/s 或更低，我想降低 PullParser 的默认缓冲区大小 8096
mysql - 指示 mysql 中的连接表中是否存在行
我正在尝试集体检查数据是否存在于各个表中。我有一个主表 A 和包含与 A 相关的数据的各种表 - 称它们为表 B、C 和 D。我想编写一个查询，对于 A 中的每个条目，指示是否有任何行在 B、C 和
rust - 指示 crate 生成的文档适用于哪个版本
当您使用 Cargo 和 rustdoc 为 Rust crate 生成文档时，我在生成的页面中看不到任何指示它适用于哪个版本的 crate。例如，看看 the log crate's documen
c++ - 指示 double 值尚未初始化的最佳方法是什么？
我有一个 CS 类，它表示 3D 坐标系，即 (x, y, z) class CS { private: double x; double y; d
php - 指示 Google+ 它应该选择什么图片
我有一个用 Wordpress 制作的项目。我有在社交网络上分享的帖子。在推特上没有问题，因为我创建的推文没有图片。Facebook 允许我从要分享的链接中选择页面图像。但是 Google+ 正在挑选
python - 指示 Scrapy 忽略站点的内容长度
问题如何在 Scrapy 中忽略响应的内容长度？解释考虑这个 curl 命令" curl -u http://data.icecat.biz/export/level4/NL/files.in
windows - 指示 win32 线程在单个处理器内核上运行
我有一个测试程序，如果它可以依赖于在 Windows 上以严格的优先级顺序安排的线程，它会简单得多。我看到一个低优先级线程与高优先级线程一起运行，我想知道这是不是因为不同的线程被安排在不同的处理器内核
javascript - 指示 getUserMedia 使用最佳可用相机分辨率
我正在使用 getUserMedia 函数从网络摄像头录制视频。一切正常，除了它仅以 640x480 分辨率录制，当我刚刚指定 video: true 作为约束时。如果我按如下方式设置约束，我现在可
typescript - 指示 typescript 一个类动态分配属性
我有一个简单的类定义如下: class Model { constructor(props?:{}) { _extend(props, this); } } 其中构造函数接受一个对象作
c# - 指示 MEF 使用任何可用的程序集
我第一次在 Visual Studio 2010 beta 2 中使用 .net-4.0 中的 System.ComponentModel.Composition 试用托管扩展框架。我一直无法让 C
c# - 指示 CodeDomProvider 编译器以英语显示错误和警告消息？
我正在使用 System.CodeDom 功能在运行时编译代码，我想知道我是否可以指定一个编译器参数或其他解决方法来以英语语言显示编译器错误，而不是使用系统的默认语言语言。但是，在 MSDN 文档中
c# - 指示 XmlWriterSettings 使用自闭合标签
我正在使用 XmlWriterSettings 将 Xml 写入文件。我有只有属性的元素，没有 child 。我希望它们输出为: 代替我可以使用 XmlWriterSettings 来实现吗？
sbt - dependsOn 指示 sbt 在多项目构建中打包依赖项目？
我在 sbt 中创建了一个多项目构建。这是 build.sbt 在主目录中: lazy val root = project in file(".") aggregate(data, reco, re
javascript - 强制 this 指示 forEach 语句中所需的对象
这里我有一个程序，可以计算一个人不同的日常事件，例如他一周踢足球的次数等。这里我有一个 switch 语句，可以计算不同事件的值。我强制这个对象指示 sort() 函数内的 dayEvents 对象。

首页

博学

6Ren·AI

商城

javascript - 指示另一个选项卡上的内容何时更改

期望的输出