$(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. LC 406. Queue Reconstruction by Height

    Suppose you have a random list of people standing in a queue. Each person is described by a pair of ...

  2. js前台传数组,java后台接收转list,前后台用正则校验

    前台,传参数时,将数组对象转换成json串,后台java收到后用 JSONArray.fromObject 转成集合. 前台js:var params = {"FileNameList&qu ...

  3. shell 部分语法

    语法: variable_name=${variable_name:-xxxx} 如果variable 已经有值,则不被新值覆盖,否则将新值赋给variable split命令切割文件

  4. 【学习笔记】使用python将最新的测试报告以附件的形式发到指定邮箱

    import smtplib, email, os, timefrom email.mime.multipart import MIMEMultipartfrom email.mime.text im ...

  5. idea关闭自动更新

    如何关闭idea的自动更新? File-Setting-Appearance&Beha-System Setting-Updates 取消勾选Automatically check updat ...

  6. CRLF、CR、LF详解

    名词解释 CR:Carriage Return,对应ASCII中转义字符\r,表示回车 LF:Linefeed,对应ASCII中转义字符\n,表示换行 CRLF:Carriage Return &am ...

  7. Linux中命令别名alias与命令替换

    当我们使用bash进行一些操作的时候,希望一些较为长的命令使用一些短的命令即可完成输入运行的话,我们就可以使用alias命令别名来帮助我们完成这个任务 alias作为一个bash的内置命令,具有一定的 ...

  8. PI薄膜相关的基本理论

    一.耐电晕的基本理论 在电场作用下,绝缘材料聚酰亚胺薄膜的部分区域发生放电短路的现象称为局部放电 根据局部放电发生部位的不同,可分为绝缘材料内部的局部放电.表面的局部放电.发生在导体边缘而周围气体被击 ...

  9. Elasticsearch的选举

    一.bully算法  经过以下几个步骤   1.启动节点ping协调器,获取当前集群状态(节点信息,集群名称等),如果协调器没有启动一直到ping通为止   2.无论能ping通,都会拿到对象acti ...

  10. elasticsearch的cross_fields查询

    1.most_fields 这种方式搜索也存在某些问题 它不能使用 operator 或 minimum_should_match 参数来降低次相关结果造成的长尾效应. 2.词 peter 和 smi ...