JQuery-Demo1：新闻选项卡

最新推荐文章于 2026-04-29 07:06:04 发布

原创

最新推荐文章于 2026-04-29 07:06:04 发布 · 1.2k 阅读

收录于

这篇博客演示了如何使用JQuery来设计一个新闻选项卡功能，详细讲解了需求，包括点击选项卡时切换显示对应内容，并且要求全程使用JQuery的選擇器和事件处理。文中提供了HTML、CSS和JS的代码示例，并展示了点击不同选项卡的效果。

JQuery-Demo1：新闻选项卡

一. 需求
二. 代码
三. 效果

Github：tab_JQ

一. 需求

设计一个新闻选项卡，要求如下：

点击不同的选项卡时，下方能够切换显示对应的内容；
要求 JavaScript 部分全部使用 JQuery 完成
1. 利用 JQuery 的选择器
2. 利用 JQuery 给选项卡添加事件

实现效果类似于下图：
效果图

二. 代码

tab_JQ.html

<!DOCTYPE html>
<html>
<head>
    <title>新闻选项卡_JQ</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="tab_JQ.css" />
</head>
<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xxplz

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

5种简单的jquery tab选项卡切换样式_文字新闻列表选项卡...

11-22

5种简单的jquery tab选项卡切换样式_文字新闻列表选项卡...

参与评论您还未登录，请先登录后发表或查看评论

百度新闻调用选项卡模式代码

01-18

用选项卡做的八个栏目的新闻源码，百度新闻调用选项卡模式代码

企业网站焦点图制作

罗彬桦的博客

01-20

339

企业网站焦点图制作用的是myfocus这个插件。注意点：焦点图初始化的ID，与图片列表最外层的ID一致。图片列表外面，包裹一个class为pic的div。具体思路做轮播图的时候，记住，外面一个大盒子 <div class="ad" id="picBox"> 里面一个盒子 <div class="pic"> 最里面还有一个ul 设置轮播图是哪个盒子。 <script type="text/javascript"> myFocus.set({

企业网站制作之新闻中心制作

罗彬桦的博客

01-20

869

企业网站制作之新闻中心制作新闻中心制作效果图：思路：很简单，不说了。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

StarRocks Routine Load性能调优实战：从默认配置到吞吐量翻倍的几个关键参数

最新发布

weixin_30325487的博客

04-29

399

本文深入探讨StarRocks Routine Load性能调优的关键参数，包括max_batch_interval、desired_concurrent_number等，通过实战案例展示如何从默认配置实现吞吐量翻倍。文章结合Kafka数据导入场景，提供详细的诊断方法和优化策略，帮助数据工程师解决数据积压和延迟问题，提升数据处理效率。

运用jQuery框架实现信息折叠卡片的效果

qq_40523659的博客

11-19

993

1.效果分析首先展示新闻第一项，其余新闻内容隐藏；给每个标题绑定单击事件；单机某标题后对其进行完整显示，同时其余新闻内容隐藏。 2.代码实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo1</title> <style type="text/css"> *{ margi

Jquery的设计思想步骤详解

acongshijia的专栏

03-05

1027

【目录】　　一、选择网页元素　　二、改变结果集　　三、链式操作　　四、元素的操作：取值和赋值　　五、元素的操作：移动　　六、元素的操作：复制、删除和创建　　七、工具方法　　八、事件操作　　九、特殊效果【正文】一、选择网页元素 jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区

jQuery元素内容操作的方法有多少种？

xiaoxijinger的博客

07-15

1069

jQuery中操作元素内容的方法，主要包括html()方法、text()方法和val()方法。html()方法用于获取或设置元素的HTML内容，text()方法用于获取或设置元素的文本内容，val()方法用来获取或设置表单元素的value值。具体使用说明如表1所示。表1 元素内容操作需要注意的是，val()方法可以操作表单（select、radio和checkbox）的选中情况，当要获取的元素是元素时，返回结果是一个包含所选值的数组；当要为表单元素设置选中情况时，可以传递数组参数。为了让读者更好地理

jquery 选项卡demo

mayslxc's word

04-11

421

选项卡-demo .list-tags{ border-bottom: 10px solid #f2f2f2; display: table; border-top: 1px solid #e2e2e2; } .list-tags li{ display: table-cell; padding: 8px 0; text-align: center;

jQuery特效Tab切换栏选项卡demo

Web前端学习博客_Web_Jason365

03-18

505

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

使用jQuery实现动画效果

NYHongHong的博客

09-30

1033

jQuery左侧列表导航条鼠标滑过flash动画导航条https://www.mk2048.com/demo/demo_target_desc.php?id=cic1hcj1j jQuery左侧列表导航条制作鼠标滑过导航条标签，flash动画导航条展示。 jquery 弹出层插件鼠标点击文字获取标题弹出层内容信息https://www.mk2048.com/demo/demo_target_desc.php?id=ciccjbhaa jquery 弹出层插件制作弹出层信息，鼠标点击文字内容信息...

对前端特效感兴趣的同学可以留意下这些例子，有点意思

u011927449的博客

04-13

329

vue自定义图片3D盒子旋转展示https://www.mk2048.com/demo/demo_target_desc.php?id=ciccichjjQuery基于vue制作3D旋转盒子，全景展示，可选择图片，设置宽高jquery云服务介绍图文列表滚动代码点击》jquery云服务介绍图文列表滚动代码jquery.superslide插件制作企业云计算服务介绍图片文字列表左右滚动切换代码，支持自...

tab选项卡新闻列表切换效果代码

10-22

很好用的源码，只需要简单修改就能使用。并且完美兼容各种浏览器。tab选项卡新闻列表切换效果代码

jquery常用的网站新闻类别选项卡代码.zip

07-11

jquery常用的网站新闻类别选项卡代码

tab选项卡新闻列表切换效果代码.zip

07-11

代码简介：tab选项卡新闻列表切换效果代码是一款原生js实现的简单tab选项卡轮换特效。

仿搜狐新闻选项卡

01-25

仿搜狐新闻选项卡

jquery.superslide.js插件网站焦点新闻图片选项卡自动切换效果代码

weixin_33816300的博客

05-05

288

2019独角兽企业重金招聘Python工程师标准>>> ...

js ajax php 原生代码写新闻选项卡

tianyu455764041的博客

02-27

482

利用js ajax php做的一个小的新闻选项卡，文件名news_card1.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&amp

原生js制作选项卡详解，适合无基础的人学习

纸飞机博客

09-06

2270

当我们学习js学习到一定程度的时候难免会有些枯燥，乏味，这个时候可能就需要写一点真正能动有用的东西来提升下兴趣了，在日常网页开发中,轮播图,导航栏,选项卡这三个是必不可少的，今天就给大家带来一个关于原生js制作选项卡的方法。知识点:选择器，for循环，事件(event)，this的指向。 选项卡：点击第n个按钮切换到第n个选项栏，并且给该按钮和选项栏添加样式，清除其他部分的样式，上图： 1、选项卡HTML结构 <div class="tab"> <ul class="b

制作四个选项卡页 Tab，用户可以通过切换不同的 Tab 页查看不同类别的新闻信息，每个 Tab 有对应的内容版块，点击某个选项卡时，显示对应的内容版块，隐藏其他内容版块，并且为了突出当前的选项卡，还

杨明金的博客

11-01

2638

查看本章节查看作业目录需求说明：制作四个选项卡页 Tab，用户可以通过切换不同的 Tab 页查看不同类别的新闻信息，每个 Tab 有对应的内容版块，点击某个选项卡时，显示对应的内容版块，隐藏其他内容版块，并且为了突出当前的选项卡，还可以设置其背景样式实现思路：编写 HTML 页面，在页面中添加 Tab、内容版块，以及对应的 CSS 样式为每个 Tab 元素添加点击事件，并将 Tab 元素的位置作为参数值传入在 JavaScript 脚本中创建点击事件的处理函数通过 doc