用于跟踪 CSS、HTML 和 Javascript 之间的类/ID 的工具答案

【问题标题】：Tool to track classes/ids between CSS, HTML and Javascript用于跟踪 CSS、HTML 和 Javascript 之间的类/ID 的工具
【发布时间】：2014-03-22 07:08:59
【问题描述】：

在开发网站时，我的部分结构如下：

    <ul id="preview-tabs" class="row nav nav-tabs">
        <li><a href="#main-preview-pane">Main</a></li>
        <li><a href="#alt1-preview-pane">Alternative 1</a></li>
        <li><a href="#alt2-preview-pane">Alternative 2</a></li>
    </ul>

带有相应的CSS：

#preview-tabs {
    border-bottom: 1px solid #8E9753;
}

最后是 Javascript：

$('#preview-tabs a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
});

现在我可能需要将 UL 的 ID 更改为 design-tabs 之类的东西，并且必须记住更新相应的 CSS 和 Javascript 以保持功能。

我的问题：是否有一种工具可以跟踪这种关系并且可以 1）提醒我一些链接代码需要更新或 2）自动更新代码。有点像 Netbeans 中 Java 的重构功能

【问题讨论】：

你为什么需要改变它？
@Hive7 例如，如果我第一次使用 Bootstrap Tabs 组件并应用教程中的代码以使其工作，然后在理解它之后我想命名以更有意义的方式标记。

标签： javascript html css refactoring

【解决方案1】：

虽然我不知道你可以做什么，如果你确实更新了它，那么你就不需要更改你的 css 是你可以向它添加一个类而不是一个 id 然后以这种方式定位元素。

【讨论】：

【解决方案2】：

您应该使用 ctlr+shift+R 将选定的文本替换为另一个文本。

【讨论】：