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

在开发网站时，我有这样一个部分：

    <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>

最后是Javascript：

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

现在，我可能需要将UL的ID更改为类似于

designtabs

的内容，并且必须记住更新相应的CSS和Javascript以维护功能

我的问题是：有没有一个工具可以跟踪这种关系，并且可以 1） 提醒我需要更新或删除某些链接代码

---

2） 自动更新代码。有点像Netbeans中Java的重构功能，我不知道你能做什么，如果你更新了它，那么你就不需要更改css了，你可以添加一个类，而不是id，然后以这种方式指向元素。

你应该使用ctlr+shift+R来用另一个文本替换所选内容。

为什么需要更改吗？@Hive7例如，如果我第一次使用引导选项卡组件并应用教程中的代码以使其正常工作，那么在理解它之后，我希望以更有意义的方式命名标记。

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