jquery --- 网页选项卡

在这里插入图片描述在这里插入图片描述

点击,不同的tab_menu,显示不同的tab_box

注意点:
1.获取ul下,当前li的编号. $(‘div ul li’).index(this)
2.显示ul下编号为$index的li -> $(‘ul li’).eq($index)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.tab{border:1px solid black;border-radius: 10px;padding: 15px;width: 230px;
}
.hide{display: none;
}
.selected{background: #ffa
}
li{display: inline-block;border-left: 1px solid black;padding: 5px;
}
li:hover{cursor: pointer;
}
.tab_box{padding: 5px;border: 1px solid black;border-radius: 5px;width: 200px;height: 100px;
}
</style>
</head>
<body><div class="tab"><div class="tab_menu"><ul><li class="selected">时事</li><li >体育</li><li >娱乐</li></ul></div><div class="tab_box"><div>时事</div><div class="hide">体育</div><div class="hide">娱乐</div></div></div><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$(function(){$('div.tab_menu li').click(function(){$(this).addClass('selected').siblings().removeClass("selected")let $index = $('div.tab ul li').index(this)$('div.tab_box >div').eq($index).show().siblings().hide()})
})</script></body>
</html>

参考《锋利的jQuery》(第2版)P166~P167

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/250952.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Webpack进阶(二)代码分割 Code Splitting

源代码index.js里包含2部分① 业务逻辑代码 1mb② 引入&#xff08;如lodash包&#xff09;的代码 1mb若更新了业务逻辑代码&#xff0c;但在浏览器运行时每次都下载2mb的index.js显然不合理&#xff0c;第三方包是不会变的 手动拆分 webpack.base.js entry: {main: path.re…

5177. 【NOIP2017提高组模拟6.28】TRAVEL (Standard IO)

Description Input Output Solution 有大佬说&#xff1a;可以用LCT做。&#xff08;会吗&#xff1f;不会&#xff09; 对于蒟蒻的我&#xff0c;只好用水法&#xff08;3s&#xff0c;不虚&#xff09;。 首先选出的泡泡怪一定是连续的一段 L&#xff0c; R 然后 L 一定属于虫…

python 3.x 爬虫基础---http headers详解

python 3.x 爬虫基础 python 3.x 爬虫基础---http headers详解 python 3.x 爬虫基础---Urllib详解 python 3.x 爬虫基础---Requersts,BeautifulSoup4&#xff08;bs4&#xff09; python 3.x 爬虫基础---正则表达式 前言  上一篇文章 python 爬虫入门案例----爬取某站上海租房…

Webpack进阶(三)

懒加载 lazy loading 用到的时候才加载vue 首屏不加载index.js const oBtn document.getElementById(j-button) oBtn.onclick async function () {const div await createElement()document.body.appendChild(div) } async function createElement() {const { default: _ …

P2634 [国家集训队]聪聪可可

链接&#xff1a;https://www.luogu.org/problemnew/show/P2634 题目描述 聪聪和可可是兄弟俩&#xff0c;他们俩经常为了一些琐事打起来&#xff0c;例如家中只剩下最后一根冰棍而两人都想吃、两个人都想玩儿电脑&#xff08;可是他们家只有一台电脑&#xff09;……遇到这种问…

算法 --- 快慢指针判断链表是否有环

解题思路: 分别设置2个指针(s,q)指向链表的头部,s每次指向下面一个(s s.next),q每次指向下面2个(q q.next.next). 如果存在环,q总会在某一时刻追上s /*** Definition for singly-linked list.* function ListNode(val) {* this.val val;* this.next null;* }*//**…

node --- 使用nrm改变npm的源

说明: 1.nrm只是单纯的提供了几个常用的下载包的URL地址,方便我们再使用npm装包是 很方便的进行切换. 2.nrm提供的cnpm 和通过 cnpm装包是2个不同的东西(使用cnpm install必须先安装cnpm -> npm install -g cnpm) 安装nrm: // linux $ [sudo] npm install --global nrm// w…

MySQL教程(三)—— MySQL的安装与配置

1 安装MySQL 打开附件中的文件&#xff08;分别对应电脑系统为32/64位&#xff09;。点next。 三个选项&#xff0c;分别对应典型安装、自定义安装和完全安装&#xff0c;在此选择典型安装&#xff08;初学者&#xff09;。 点install。 广告&#xff0c;忽略它。 安装完成…

c++ --- 字符串中的标点符号

题外话: 最近看node,发现node中好多强大的功能都设计到C,为了加深对node的理解,开始简单的学习一下C语法 ispunct: 统计string对象中标点符号的个数 #include <iostream> using namespace std; int main () {string s ("Hello World!");decltype(s.size()) p…

Hadoop(5)-Hive

在Hadoop的存储处理方面提供了两种不同的机制&#xff0c;一种是之前介绍过的Hbase&#xff0c;另外一种就是Hive&#xff0c;有关于Hbase&#xff0c;它是一种nosql数据库的一种&#xff0c;是一种数据库&#xff0c;基于分布式的列式存储&#xff0c;适合海量数据的操作&…

认识及实现MVC

gitee M&#xff1a;Model 数据模型&#xff08;模型层&#xff09;→ 操作数据库&#xff08;对数据进行增删改查&#xff09; V&#xff1a;View视图层 → 显示视图或视图模板 C&#xff1a;Controller 控制器层 → 逻辑层 数据和视图关联挂载和基本的逻辑操作 API层 前端请…

算法 --- 翻转二叉树

解(C): 1.二叉树判空 if(root 0) 或 if(root nullptr); 2.二叉树的左子树: root->left . 3.使用递归,将当前根节点的左右指针指向互换左向右子树(此时右子树也进行了翻转) // C /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode…

float 常见用法与问题--摘抄

float 属性绝对是众多切图仔用的最多的 CSS 属性之一&#xff0c;它的用法很简单&#xff0c;常用值就 left、right、none 三个&#xff0c;但是它的特性你真的弄懂了吗&#xff1f; 我会在这里介绍我对 float 的认识与使用&#xff0c;以及使用过程中遇到的问题。 对 float 的…

javascipt -- find方法和findIndex方法的实现

find: 根据传入的条件函数,返回符合条件的第一项 var arr [{id: 1, name: zs, age: 18},{id: 2, name: zs, age: 17},{id: 3, name: ls, age: 16},{id: 4, name: ls, age: 15}]Array.prototype._find_ function(cb){for(var i0; i< this.length; i){if(cb(this[i],i)){ret…

【探讨】javascript事件机制底层实现原理

前言 又到了扯淡时间了&#xff0c;我最近在思考javascript事件机制底层的实现&#xff0c;但是暂时没有勇气去看chrome源码&#xff0c;所以今天我来猜测一把 我们今天来猜一猜&#xff0c;探讨探讨&#xff0c;javascript底层事件机制是如何实现的 博客里面关于事件绑定与执行…

node --- 在node中使用mongoosemongoDB的安装

*首先确保,你的电脑安装了mongodb,网址: mongodb官网 *使用npm安装 mongoose: mongoose官网 ps:mongoose是Node中操作mongoDB的第三方插件.用于提高数据库操作效率(相当于在mongoDB上封装了一次,暴露出更友好的API) MongoDB的安装 1.下载地址 2.下载好了后,傻瓜式的安装(我的…

前端面试手写题

深拷贝 // 深拷贝 function deepClone(ori) {let tar;if (typeof ori object && ori ! null) {tar Array.isArray(ori) ? [] : {}for (let k in ori) {if (ori.hasOwnProperty(k)) {tar[k] deepClone(ori[k])}}} else {tar ori}return tar}继承 // 圣杯模式实现…

node --- 使用express.Router与body-parser

express框架提供了一个Router方法,用于监听路由 // 命令行(windows*64) npm install express --save// router.js const express require("express"); // 定义路由 const router express.Router();// 处理http://host:port/students/ 路由(GET方法) router.get…

python基础1 第一天

TEST 1 阿斯蒂芬 day1test1 while 1&#xff1a;print&#xff08;333&#xff09; import randomprint转载于:https://www.cnblogs.com/shuangzhu/p/9243853.html

微软认知服务应用秘籍 – 漫画翻译篇

概述 微软认知服务包括了影像、语音、语言、搜索、知识五大领域&#xff0c;通过对这些认知服务的独立或者组合使用&#xff0c;可以解决很多现实世界中的问题。作为AI小白&#xff0c;我们可以选择艰难地攀登崇山峻岭&#xff0c;也可以选择像牛顿一样站在巨人的肩膀上。本章节…