jQuery特效Tab切换栏选项卡demo

最新推荐文章于 2024-04-12 13:28:13 发布

Web-Jason365

最新推荐文章于 2024-04-12 13:28:13 发布

阅读量348

点赞数

分类专栏： jQuery 文章标签： jquery css

本文链接：https://blog.csdn.net/Web_Jason365/article/details/114988344

版权

在建站过程中，有时候需要有效利用页面空间，需要将多个模块的链接、图片、视频等网站资源放在一个div中，实现点击或者滑动实现展示多个模块，多用在侧边栏展示网站最新更新、最热文章，或者是展示顶级频道页面下的多个栏目的内容，其实CSS也可实现这样的效果，但是还是没有jQuery实现起来方便，以下是今天学习jQuery写的一个jQuery实现tab切换栏特效，实现多个模块点击切换的Demo.

Html和jQuery代码：

<!doctype html>
<html lang="ch-ZN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tab切换栏选项卡jQuery特效</title>
    <link rel="stylesheet" href="tab.css">
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<main class="main">
    <div class="recommend-article  container">
        <ul class="navTab">
            <li class="active">最新文章</li>
            <li>热门文章</li>
            <li>热门点击</li>
        </ul>
        <div class="article-item">
            <ul>
                <li><a href=&

最低0.47元/天解锁文章

Web-Jason365

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery特效Tab切换栏选项卡demo

在建站过程中，有时候需要有效利用页面空间，需要将多个模块的链接、图片、视频等网站资源放在一个div中，实现点击或者滑动实现展示多个模块，多用在侧边栏展示网站最新更新、最热文章，或者是展示顶级频道页面下的多个栏目的内容，其实CSS也可实现这样的效果，但是还是没有jQuery实现起来方便，以下是今天学习jQuery写的一个jQuery实现tab切换栏特效，实现多个模块点击切换的Demo. Html和jQuery代码： <!doctype html><html lang="c...
复制链接

扫一扫