$(function(){
var tabnav = $("#tab-nav ul li");
tabnav.click(function(){
$(this).addClass("hover").siblings().removeClass("hover");
var index = $("#tab-nav ul li").index(this);
$("ul.tab-con").eq(index).fadeIn().siblings("ul.tab-con").fadeOut();
});
});
<div id="tab-nav">
<ul>
<li class="hover" data-tabid=""><i>最新发布</i></li>
<li data-tabid=""><i>小编推荐</i></li>
<li data-tabid=""><i>本周热门</i></li>
</ul>
<ul class="pcontent clearfix tab-con" data-tabnum="">
<li></li>
</ul>
<ul class="pcontent clearfix tab-con" data-tabnum="">
<li></li>
</ul>
<ul class="pcontent clearfix tab-con" data-tabnum="">
<li></li>
</ul>
</div>

点击切换JS的更多相关文章

  1. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  2. Js实现图片点击切换与轮播

    Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  3. js实现点击切换checkbox背景图片

    在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现.如图,在输入用户名和密码后,用户需要选择是否记住密码 图片背景为白色表示未勾选状态 ,背景 ...

  4. jquery——左右按钮点击切换一组图片功能

    一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...

  5. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  6. jquery - 通过点击切换文字内容

    今天要写一个简单的显示/隐藏效果,本以为是挺简单的事儿,没想到还真因为基本功不扎实遇到了问题,这里跟大家分享一下. 百度了很多方法,精简能用的干货实在太少,最后还是通过去查jq的官方api才找到了解决 ...

  7. jQuery_$方法、属性、点击切换

    jQuery_$方法 1.$.each():遍历数组或对象中的数据 2.$.trim():去除字符串两边的空格 3.$.type(obj):得到数据的类型 4.$.isArray(obj):判断是否为 ...

  8. jq demo 轮播图,图片可调用,向左,自动+鼠标点击切换

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. jq demo 轮播图,图片可调用,向上,自动+鼠标点击切换

    1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...

随机推荐

  1. [Python]在python中调用shell脚本,并传入参数-02python操作shell实例

    首先创建2个shell脚本文件,测试用. test_shell_no_para.sh 运行时,不需要传递参数 test_shell_2_para.sh 运行时,需要传递2个参数  test_shell ...

  2. Python之异常处理合集

    PermissionError: [Errno 13] Permission denied open(filePath)中的filePath是一目录路径,而非目录路径 先前打开的file文件对象未被关 ...

  3. 04-再探JavaScript

    一. DOM介绍 1. 什么是DOM? DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构. 目的其实就是为了能让js操作html元素而制定的一个规范. DOM就 ...

  4. Pytorch1.0入门实战三:ResNet实现cifar-10分类,利用visdom可视化训练过程

    人的理想志向往往和他的能力成正比. —— 约翰逊 最近一直在使用pytorch深度学习框架,很想用pytorch搞点事情出来,但是框架中一些基本的原理得懂!本次,利用pytorch实现ResNet神经 ...

  5. 【DSP开发】【Linux开发】IIC设备驱动程序

    IIC设备是一种通过IIC总线连接的设备,由于其简单性,被广泛引用于电子系统中.在现代电子系统中,有很多的IIC设备需要进行相互之间通信 IIC总线是由PHILIPS公司开发的两线式串行总线,用于连接 ...

  6. 使用PowerShell 自动安装VC++补丁

    执行环境:Windows Server 2012 R2 VC++下载链接 这里有个问题,虽说可以静默安装,但是未对当前系统检测是否已安装vc++补丁,望大佬指点 # author:lttr <w ...

  7. ASP.NET Core EFCore 之Code First

    1.在.NET Core项目中使用Nuget引用包 Sql Server 请安装 Microsoft.EntityFrameworkCore.SqlServer 2.添加实体类 [Table(&quo ...

  8. php 二维数据排序 排行榜

    php 二维数据排序 排行榜 $rateCount = array(); foreach($groupUsers as $user){ $rateCount[] = $user['rate']; } ...

  9. jenkins和gitlab备份

    #把/opt目录拷贝到10.0.0.31的/tmp下. rsync  -avz  /opt  root@10.0.0.31:/tmp/ pull: rsync -avz root@10.0.0.31: ...

  10. [转帖]微软公布2019 Q2财报 几大部门均实现增长

    微软公布2019 Q2财报 几大部门均实现增长 https://baijiahao.baidu.com/s?id=1624179330159140676&wfr=spider&for= ...