统计
  • 建站日期:2021-03-10
  • 文章总数:275 篇
  • 评论总数:115 条
  • 分类总数:21 个
  • 最后更新:9月4日
文章 技术代码

jQuery一行代码实现选项卡效果

小椿
首页 技术代码 正文

1、我们都知道jQuery是一个封装好的函数方法库,通过jQuery可以将更加简单的实现链式编程。下面给大家一个一行代码实现选项卡效果。

1-1.首先就是先简单的写一下结构样式

1.1.1
准备工作—从jQuery官网下载方法库放在项目文件中等待html文件加载
选项卡业务分析:
(1)首先是在一个大的div(盒子)里包着两个小盒子(ul ol)
(2)当点击或者经过 ul 里的 li 标签时 ol 里的相同索引的 li 显示 其他的兄弟 li 隐藏(ol 下的li 默认隐藏 在 ul li 被点击时 ol 里的 相同 索引下标 的li 才会 赋值样式 display:flex;让其显示)
(3)当点击 ul 下的 li 时,被点击的 li 添加样式,它的所有兄弟 li 去除样式

1.1.2
写好选项卡的页面HTML结构

<div class="tabcard">
      <ul>
        <li class="active">新闻</li>
        <li>发现</li>
        <li>关于我们</li>
      </ul>
      <ol>
        <li class="active new">
          你说我的眼睛灿若星辰,那是因为你是星辰,而我的眼中只有你。
        </li>
        <li class="find">
        我喜欢那些闪光的东西,比如冬日的雪花,天上的星星,还有你的眼睛。
        </li>
        <li class="about">
          像华丽的燕尾蝶,失去往日的光彩、变作一片枯死的叶。
        </li>
      </ol>
    </div>

样式如下图:
当然这个选项卡不是很美观,样式都可以自己去设定。这里就简单的做一个样式。

1.1.3
下面是css样式:
可以用来参考,根据自身需要进行修改

.tabcard {
    width: 100%;
    border: 2px solid red;
    height: 200px;
}

.tabcard ul {
    margin: 0;
    width: 100%;
    height: 30px;
    border-bottom: 2px solid red;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.tabcard ul li {
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 30px;
}

.tabcard ol {
    width: 100%;
    height: calc(100% - 30px);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
    position: relative;
}

.tabcard ol li {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    display: none;

}

.tabcard ul li:nth-child(2) {
    border-right: 4px solid gray;
    border-left: 4px solid gray;
}

.new {
    background: rgb(118, 147, 158);
}

.find {
    background: rgb(212, 180, 180);
}

.about {
    background: rgb(192, 70, 70);
}

.tabcard ul li.active {
    background: skyblue;
    color: red;
}

.tabcard ol li.active {
    display: flex;
}

1.1.4
下面是js的相关代码
(1)先加载到 下载下来的 jQuery方法库。
(2)然后在进行链式编程。

<script src="./jquery.min.js"></script>
<script>
//这里是给所有的ul下的li添加点击事件
$('.tabcard>ul>li').click(function () {
        //这里的this是被点击的标签本身
        //意思是:给当前被点击的标签添加 active 这个类名里的css样式
      $(this).addClass('active')
      //被点击标签的所有兄弟标签
      .siblings()
    //移出类名为 active 的CSS样式
    .removeClass('active')
    //当前被点击的li的直接父级
    .parent()
    //的下一个兄弟标签
    .next()
    //找到里面的li
    .find('li')
    //移出里面的 类名为active 的CSS样式
    .removeClass('active')
    //选择和当前被点击的ul 下的 li 相同的 ol 下的 li 添加样式 让其显示
    .eq($(this).index()).addClass('active');
    })

</script>

有不对的地方还望多多包涵指出。

版权声明 1 本站名称:乡野风情
2 本站网址:http://www.t35.cn/
3 本文网址:http://www.t35.cn/jsdm/261.html
4 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ:550966987进行删除处理。
5 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
6 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
7 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
-- 展开阅读全文 --
用css和HTML做loding小动画
« 上一篇
js实现防抖节流
下一篇 »

发表评论