jQ选项卡

刺骨的言语ヽ痛彻心扉 2022-06-14 10:54 227阅读 0赞

### jQ选项卡 ###

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style> *{ margin:0;padding:0;} ul,li{ list-style: none;display: block;} .clearfix:after{ height:0;display: block;clear: both;content: "";} .type{ width:450px;margin:50px auto;border:1px solid #000001;margin-bottom: 5px;} .type ul li{ width:100px;float: left;margin-right: 10px;text-align:center;background:#ccc;height:30px;line-height: 30px;cursor: pointer;} .show{ display:block !important;} .active{ background: red!important;} .content{ width:450px;margin:0 auto;border:1px solid #000001;height:400px;overflow: hidden;} .content p{ display: none;height:400px;line-height: 400px;text-align: center;} </style>
        <script src="js/jquery.js"></script>
    </head>
    <body>
    <div class="type">
        <ul class="clearfix">
            <li class="active">新闻</li>
            <li>娱乐</li>
            <li>社会</li>
            <li>生活</li>
        </ul>
    </div>
    <div class="content">
        <p class="show">新闻内容</p>
        <p>娱乐内容</p>
        <p>社会内容</p>
        <p>生活内容</p>
    </div>
    <script> $(document).ready(function(){ $("li").click(function(){ //给当前对象添加类名 它的兄弟们移除类名 $(this).addClass("active").siblings("li").removeClass("active"); // 保存当前点击对象的索引值 var x=$(this).index(); // eq(x) 除x以外 $("p:eq("+x+")").addClass("show").siblings("p").removeClass("show"); }) }) </script>
    </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，227人围观）

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

相关阅读

相关选项卡

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

刺骨的言语ヽ痛彻心扉/ 2022年12月13日 04:43/ 0 赞/ 210 阅读

相关 js选项卡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

阳光穿透心脏的1/2处/ 2022年07月30日 13:55/ 0 赞/ 208 阅读

相关自动选项卡

![自动简易选项卡][SouthEast] <!DOCTYPE html> <html lang="en"> <head> <meta

电玩女神/ 2022年06月16日 12:28/ 0 赞/ 236 阅读

相关 jQ选项卡

jQ选项卡 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-

刺骨的言语ヽ痛彻心扉/ 2022年06月14日 10:54/ 0 赞/ 228 阅读

相关选项卡

关于选项卡效果 1. 常规 2. 传参（可设置多个参数值） 3. 回调函数下面是几种参考方法常规方法 <!DOCTYPE html>

淩亂°似流年/ 2022年06月14日 10:37/ 0 赞/ 296 阅读

相关 jq实现的选项卡

效果图： ![这里写图片描述][SouthEast] 代码如下： <!DOCTYPE html> <html lang="en"> <head>

偏执的太偏执、/ 2022年05月31日 04:08/ 0 赞/ 176 阅读

相关 JQ实现——TAB选项卡切换登录界面

今天，分享一个简单实用的TAB选项卡切换登录界面。 ![这里写图片描述][70] ![这里写图片描述][70 1] 主页部分 <!DOCTYPE htm

柔光的暖阳◎/ 2022年05月23日 12:12/ 0 赞/ 369 阅读

相关 jQuery选项卡

Html的代码 <body> <div class="wrap"> <ul class="blist clearfix">

我不是女神ヾ/ 2022年02月02日 19:43/ 0 赞/ 343 阅读

相关 tab选项卡

tab选项卡 tab选项卡 tab选项卡可以说是一个可以在一个·规定的位置中可以嵌套多个页面或小页面，也可以说是一本笔记本可以有很多张纸，那么多纸都封装在笔记本里面，可以

た入场券/ 2022年01月21日 09:47/ 0 赞/ 451 阅读

相关 js/jq 选项卡开发js代码

往往最基础的js代码能够学到很多，成才很快的东西，今天就写了个tab选项卡，希望你和同样的我有所收获。 ![1181828-20190521150134132-8498

悠悠/ 2021年12月07日 13:13/ 0 赞/ 258 阅读