代码如下:<UL id=tabMainNav> <LI class=selected id=tab_GameinfoNav xss=removed><SPAN><A>{$PHPCMS[sitename]}</A></SPAN></LI> <LI id=tab_ShareEmailNav xss=removed><SPAN><A>由 Email 分享</A></SPAN> </LI> <LI id=tab_ShareIMNav onmousemove=”show_tab
滑动门效果是一种常见的网页设计技巧，主要用于导航菜单或选项卡式布局，使得用户可以通过鼠标悬停在不同的选项上，显示出对应的隐藏内容。这个例子中，我们看到的是一个使用JavaScript和CSS实现的简单通用的滑动门代码。
HTML部分创建了一个无序列表`<ul id="tabMainNav">`，其中包含了四个列表项`<li>`。每个列表项都有一个唯一的ID，并且通过`onmousemove`事件触发`show_tab`函数。列表项中的`<a>`标签用于点击后导航，而`<span>`则用于包裹文字内容。`<ul id="tabContent">`则是用于存放滑动门展示的内容，有四个空的列表项与上方的导航项相对应。
接着，JavaScript部分的代码定义了一个`show_tab`函数，该函数接收一个参数`id`，表示当前被选中的选项。它首先获取`tabMainNav`和`tabContent`元素，然后遍历`tabMainNav`的所有子元素（即导航项）。当遍历到与`id`相匹配的子元素时，将其`className`设置为`selected`，并清空`tabContent`中对应项的`className`。对于其他非匹配的子元素，将它们的`className`设为空，并将`tabContent`中对应项的`className`设为`hidden`。`hidden`和`selected`是CSS类名，用于控制元素的可见性和样式。
CSS部分定义了`.hidden`和`.selected`两个类。`.hidden`通常会设置一些隐藏元素的样式，如`display:none`，使得内容不可见。而`.selected`类可以用来设置选中状态下的样式，比如改变背景色、边框等，以突出显示当前选中的选项。
为了实现滑动门效果，开发者可以修改`.hidden`和`.selected`的CSS规则，添加适当的样式，例如调整颜色、大小、边框等，以满足自己的设计需求。这个简单的示例提供了一个基础框架，可以在此基础上进行扩展和定制，以适应各种网页设计的需求。由于代码结构清晰，易于理解，因此被称为“简单通用”的滑动门代码。
