利用Js如何写tab

     js接触了很久,知道最近的几个月,才越来越喜欢上这个,一直都没有尝试过自己篇博客,尝试用简单的语言,和大家分享一下自己的学习经验。

     首先是html部分,在这里举例做三个的标签的。

   <body>

     <div id="tab">
        <ul>
                <li class="tabin">标签1</li>
                <li>标签2</li>
                <li>标签3</li>
        </ul>
        <div class="contentin">我是内容1</div>
        <div>我是内容2</div>
        <div>我是内容3</div>

    </div>

</body>

接着是css部分,先设置li,div的基本样式,还要对当前的li和div设置样式

ul,li
{
    margin: 0;
    padding: 0;
    list-style: none;
 }

li
{
        float: left;
        background-color: #868686;
        color: White;
        padding: 5px;
        margin-r

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的利用 jQuery 实现 tab 栏切换的代码示例: HTML 代码: ```html <div class="tabs"> <ul class="tab-nav"> <li class="active"><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div class="tab-content active" id="tab1"> <h2>Tab 1 Content</h2> <p>Content for Tab 1 goes here.</p> </div> <div class="tab-content" id="tab2"> <h2>Tab 2 Content</h2> <p>Content for Tab 2 goes here.</p> </div> <div class="tab-content" id="tab3"> <h2>Tab 3 Content</h2> <p>Content for Tab 3 goes here.</p> </div> </div> ``` 在 HTML 中,我们使用一个包含所有选项卡的容器 `.tabs`,其中包含一个 `.tab-nav` 列表,以及对应的 `.tab-content` 容器。注意,我们需要为第一个选项卡和对应的内容添加 `active` 类,表示默认显示。 CSS 代码: ```css .tabs { border: 1px solid #ccc; padding: 10px; } .tab-nav { list-style: none; margin: 0; padding: 0; } .tab-nav li { display: inline-block; margin-right: 10px; } .tab-nav a { display: block; padding: 5px; border: 1px solid #ccc; text-decoration: none; color: #333; } .tab-nav a:hover { background-color: #f5f5f5; } .tab-nav .active a { background-color: #ccc; } .tab-content { display: none; margin-top: 10px; padding: 10px; border: 1px solid #ccc; } .tab-content.active { display: block; } ``` 在 CSS 中,我们设置了选项卡和对应内容的样式,其中包括: - `.tab-nav`:选项卡列表的样式; - `.tab-nav li`:每个选项卡的样式; - `.tab-nav a`:选项卡链接的样式; - `.tab-nav .active a`:当前选中选项卡链接的样式; - `.tab-content`:选项卡内容的样式; - `.tab-content.active`:当前选中选项卡对应内容的样式。 JavaScript 代码: ```js $(document).ready(function() { // 默认显示第一个选项卡 $('.tab-nav li:first-child').addClass('active'); $('.tab-content:first-child').addClass('active'); // 点击选项卡切换对应内容 $('.tab-nav a').click(function() { // 获取要显示的选项卡 ID var tabId = $(this).attr('href'); // 切换选项卡的 active 类 $('.tab-nav li').removeClass('active'); $(this).parent().addClass('active'); // 切换对应内容的 active 类 $('.tab-content').removeClass('active'); $(tabId).addClass('active'); // 阻止默认链接行为 return false; }); }); ``` 在 JavaScript 中,我们首先使用 `$().ready()` 函数等待页面加载完成,然后为第一个选项卡和对应内容添加 `active` 类。接着,我们为选项卡的链接添加 `click` 事件,当点击时,获取对应的选项卡 ID,然后切换对应元素的 `active` 类。注意,我们需要使用 `return false` 阻止默认链接行为。 这样,我们就成功利用 jQuery 实现了一个简单的 tab 栏切换效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值