jQ选项卡

刺骨的言语ヽ痛彻心扉 2022-06-14 10:54 256阅读 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 条评论，256人围观）

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

相关阅读

相关 jq实现一个简易的选项卡

以下写的方法不是最优质的的方法，就是为了练练手，希望大家不要介意，如有问题，还请多指教 <!DOCTYPE html> <html lang="en">

浅浅的花香味﹌/ 2023年05月31日 12:21/ 0 赞/ 13 阅读

相关 JQ实现选项卡样式切换

HTML <div> <ul> <li class="active"></li> <li></li> <li>

傷城~/ 2023年02月16日 06:47/ 0 赞/ 15 阅读

相关 jq实现tab选项卡

<div class="tab"> <ul class="tab-title"> <li class="this">

心已赠人/ 2023年02月11日 07:27/ 0 赞/ 14 阅读

相关选项卡

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

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

相关 js选项卡

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

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

相关 jQ选项卡

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

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

相关选项卡

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

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

相关 jq实现的选项卡

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

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

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

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

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

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

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

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