$(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. Android Stuido中断点调试和高级调试

    写一个简单的调试程序 import android.os.Bundle; import android.support.v7.app.AppCompatActivity; public class M ...

  2. SOAP1.1&SOAP1.2

    http://www.webxml.com.cn/webservices/ChinaTVprogramWebService.asmx?op=getTVstationString SOAP 1.1 以下 ...

  3. centos7安装VuePress

    VuePress可以帮你快速建站,使用MarkDown语法生成静态html yum install -y gcc-c++ make curl -sL https://rpm.nodesource.co ...

  4. Head First HTML 与 CSS 学习笔记

    总的来说,这本书作为入门HTML和CSS还是不错的,讲解生动有趣,这也是Head First系列书籍的特点.缺点就是讲解的不够全面~ 第三章 一般来讲,如果要引用一段或者多段文字, 就要使用<b ...

  5. 安装 Git 并连接 Github

    下载安装 Git, 下载地址:https://git-scm.com/download/win . 在命令行中输入 git 测试 Git 是否安装成功. 在桌面鼠标右击打开 Git Bash Here ...

  6. 学习前端D1

    第一次写博客,有些小激动,以前写学习的记录都是在有道云笔记上写的,在博客园上更多的是膜拜大佬.偷师学艺.前段时间,我和朋友闲聊时,知道用博客每天写知识会提高学习的热情,这感情好呀,于是乎,今天,我依旧 ...

  7. postman关联及读取文件进行参数化

    场景:登录后获取响应数据中的key.token..以便在接下来的接口调用.... 一.发送请求.查看响应 二.在Tests里使用响应的js代码来使其成为全局变量......... >>&g ...

  8. C++学习笔记-const

    const在C++中有着大量的运用,深刻理解const有助于进一步理解C++. const基础知识 int main() { const int a;//C++中必须初始化 int const b;/ ...

  9. kmp算法分析和C++实现

    知乎高赞分析 作者:逍遥行 链接:https://www.zhihu.com/question/21923021/answer/37475572来源:知乎著作权归作者所有.商业转载请联系作者获得授权, ...

  10. SIFT图像配准 python3.6 + opencv3.3代码

    opencv3.x 中部分函数有改变: 1. SIFT:可以采用help(cv2.xfeatures2d)查询 2.drawKeypoints: 同样采用help()方法查询 opencv3 版本si ...