<script> $(function(){ doTab("#Tab1"); }); function doTab(tab){ var li = tab + " .tabTitle>li"; var div = tab + " .tabDiv"; $(li).mouseover(function(){ $(this).addClass("current").siblings().removeClass("current"); var indexNO = $(this).index(); $(div).eq(indexNO).stop().fadeIn(300).siblings().stop().fadeOut(300); }); } </script>
时间: 2024-04-24 13:22:00 浏览: 9
这是一段 JavaScript 代码,它实现了一个选项卡的功能。具体来说,它会在页面加载完成后执行 doTab 函数,该函数会给选项卡的标题添加鼠标悬停事件。当鼠标悬停在某个标题上时,它会添加一个名为 "current" 的 CSS 类,并将其兄弟元素的 "current" 类移除。然后,它会获取该标题的索引号,并将与该索引号相等的选项卡内容显示出来,同时将其他选项卡内容隐藏。这个函数可以通过传递选项卡的选择器作为参数来使用。
相关问题
$(function(){ $("#Tab1 .tabTitle>li").mouseover(function(){ $(this).addClass("current").siblings().removeClass("current"); var indexNO = $(this).index(); $("#Tab1 .tabDiv").eq(indexNO).fadeIn("slow").siblings().fadeOut(200); }) })详细讲解此代码
这段代码使用了 jQuery 库来实现一个选项卡效果。具体来说:
1. `$()` 是 jQuery 中的选择器,通过传递一个 CSS 选择器,可以获取到匹配的 DOM 元素。
2. `$("#Tab1 .tabTitle>li")` 选择了 ID 为 "Tab1" 的元素下的所有 class 为 "tabTitle" 的子元素中的所有 li 元素。
3. `.mouseover()` 方法绑定了鼠标悬浮事件,当鼠标悬浮在这些 li 元素上时,会执行回调函数中的代码。
4. `$(this)` 表示当前被悬浮的 li 元素,`.addClass()` 方法会给它添加 "current" 类,`.siblings()` 方法会获取它的兄弟元素,`.removeClass()` 方法会将它们的 "current" 类移除。
5. `var indexNO = $(this).index()` 获取了当前 li 元素在兄弟元素中的索引值,作为切换选项卡时的参数。
6. `$("#Tab1 .tabDiv").eq(indexNO).fadeIn("slow").siblings().fadeOut(200)` 选择了 ID 为 "Tab1" 的元素下的所有 class 为 "tabDiv" 的子元素,`.eq()` 方法选择了其中索引等于 `indexNO` 的元素,`.fadeIn()` 方法将其渐入显示,`.siblings()` 方法选择了其他兄弟元素,`.fadeOut()` 方法将它们渐出隐藏。
总的来说,这段代码实现了一个选项卡的效果,当鼠标悬浮在某个选项上时,对应的内容会显示出来,其他选项的内容则会隐藏。
<ul style="left: 115px; visibility: visible; display: none;"><li><a target="context" href="notes.php" onclick="parent.tab.location='hide_tab.php';parent.sub_tab.location='blank.php' ">個人備忘錄</a></li><li><a target="tab" href="user_setting.php" onclick="parent.context.location='hide_tab.php';parent.tab.location='blank.php';parent.sub_tab.location='blank.php' ">帳戶通知管理</a></li><li><a target="context" href="change_pass.php" onclick="parent.tab.location='hide_tab.php';parent.sub_tab.location='blank.php' ">變更密碼</a></li><li><a target="tab" href="group_module_setting.php" onclick="parent.context.location='blank.php';parent.sub_tab.location='blank.php' ">分組權限設定</a></li></ul>点击a,让上一级uldisplay为block
您可以使用JavaScript来实现这个功能,可以给a标签添加一个点击事件,事件中获取当前a标签的父节点ul,然后设置其display属性为block即可。
示例代码如下:
```html
<ul id="myList">
<li><a href="#" onclick="showList(this)">点击显示列表</a>
<ul style="left: 115px; visibility: visible; display: none;">
<li><a target="context" href="notes.php" onclick="parent.tab.location='hide_tab.php';parent.sub_tab.location='blank.php' ">個人備忘錄</a></li>
<li><a target="tab" href="user_setting.php" onclick="parent.context.location='hide_tab.php';parent.tab.location='blank.php';parent.sub_tab.location='blank.php' ">帳戶通知管理</a></li>
<li><a target="context" href="change_pass.php" onclick="parent.tab.location='hide_tab.php';parent.sub_tab.location='blank.php' ">變更密碼</a></li>
<li><a target="tab" href="group_module_setting.php" onclick="parent.context.location='blank.php';parent.sub_tab.location='blank.php' ">分組權限設定</a></li>
</ul>
</li>
</ul>
<script>
function showList(a) {
var ul = a.parentNode.querySelector('ul');
ul.style.display = 'block';
}
</script>
```
在这个示例中,我们给a标签添加了一个onclick事件,点击后调用showList函数。这个函数中,我们首先获取当前a标签的父节点ul,然后设置其display属性为block。这样就可以实现点击a标签显示下方的列表的功能了。