18-讨论

13.4.3　讨论

当函数开始运行时，显示第一个选项卡的内容区域，由于 preload.css 文件中的 display: none 样式规则，其余部分保持隐藏。

除此之外，必须做的就是监听 <ul class="tabs"> 中的任何链接被单击。如果单击的链接还没有 class="current" 属性，我们就知道它的内容没有显示，所以为单击的链接设置 class="current", 并从具有该类的其他兄弟元素中删除该类。接下来，捕捉同一个页面某个 ID 的 href="..." 或者单击的链接，通过jQuery的 .show() 方法显示该元素，同时隐藏可见的所有兄弟选项卡内容区域。注意，如果你想改进功能，例如，在选项卡状态变化时触发自定义事件或者通过Ajax加载远程内容，一定要研究一下官方的jQuery UI Tab窗口组件。