Jquery实现横向tab切换

以你之姓@ 2021-11-09 07:52 426阅读 0赞

**　//需求：鼠标放在不同的导航栏上，下面显示的内容自动切换**

![1663270-20190511160128681-899822914.png][]

--------------------

**//代码如下**

<!DOCTYPE html>

<head>

<title>Document</title>

**  \*\{**

**         *margin*: 0;**

**         *padding*: 0;**

**      \}**

**      ul\{**

**         *list-style*: none;**

**      \}**

**      .tab\{**

**         *width*: 300px;**

**         *border*: 1px solid \#000;**

**         *overflow*: hidden;**

**         *background-color*: \#ddd;**

**      \}**

**      .tab li\{**

**         *height*: 30px;**

**         *line-height*: 30px;**

**         *width*: 50px;**

**         *float*: *left*;**

**         *text-align*: center;**

**      \}**

**      .tab .act\{**

**         *height*: 28px;**

**         *line-height*: 28px;**

**         *border-top*: 2px solid orange;**

**         *background-color*: white;**

**      \}**

**      .con\{**

**         *width*: 300px;**

**         *border*:1px solid \#000;**

**      \}**

**      .con li\{**

**         *height*: 300px;**

**         *display*: none;**

**         *text-align*: center;**

**         *line-height*: 300px;**

**      \}**

**      .con .show\{**

**         *display*: block;**

**      \}**

</style>

</head>

<body>

**  <ul class="tab">**

**      <li class="act">图片</li>**

**      <li>专栏</li>**

**      <li>热点</li>**

**   </ul>**

**   <ul class="con">**

**      <li class="show">图片</li>**

**      <li>专栏</li>**

**      <li>热点</li>**

**   </ul>**

**$(".tab li").mouseover(*function*()\{**

**     **    // 进入元素的索引,找到当前li的索引

**         *var* index = $(*this*).index();**

**         //console.log(index);**

**  **       // tab栏的切换

**         $(*this*).addClass("act").siblings().removeClass("act");**

**    **     // con栏的切换

**         $(".con li").eq(index).addClass("show").siblings().removeClass("show");**

\})

</script>

</body>

</html>

转载于:https://www.cnblogs.com/binghuaZhang/p/10848948.html

[1663270-20190511160128681-899822914.png]: /images/20211109/43c0d4360bab46698c0dbe2dcac3ed69.png

Jquery实现横向tab切换

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jquery 基础+Tab栏切换案例

相关 jQuery样式操作（Tab栏切换）

相关基于jquery的tab切换项

相关 jquery 简单两步实现tab切换效果

相关基于jquery的tab切换

相关 jQuery实战_tab栏切换

相关 jquery之tab样式切换

相关 jQuery 之 TAB切换菜单

相关 Jquery实现横向tab切换

相关 jQuery实现tab切换