$(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 656. Coin Path 【lock, Hard】

    Given an array A (index starts at 1) consisting of N integers: A1, A2, ..., AN and an integer B. The ...

  2. LC 954. Array of Doubled Pairs

    Given an array of integers A with even length, return true if and only if it is possible to reorder ...

  3. Redis Cluster 官方集群搭建指南

    安装ruby环境因为官方提供的创建集群的工具是用ruby写的,需要ruby2.2.2+版本支持,ruby安装需要指定openssl. 安装openssl $ wget https://www.open ...

  4. [Python]python-jenkins获取正在构建中的job

    需求: 我现在需要完成1个接口,这个接口会启动jenkins构建jobA, jobA构建结束, 返回job的构建结果 思路: 首先使用get_job_info获取最后1次构建的构建序号,然后再通过ge ...

  5. 点击其他区域关闭dialog

    1.在打开dialog处阻止冒泡,在body click事件中关闭dialog2.不阻止冒泡,在body click事件中判断target是否为diallog或其子节点 在Safari浏览器中,在默认 ...

  6. xaml 中 引用嵌套类的对象

    public class MotorType1 { public class MotorType2 { public class MotorType3 { /// <summary> // ...

  7. 【转】Linux curl命令详解

    [From]https://www.cnblogs.com/duhuo/p/5695256.html 命令:curl 在Linux中curl是一个利用URL规则在命令行下工作的文件传输工具,可以说是一 ...

  8. PJzhang:URL重定向漏洞的72般变化

    猫宁!!! 反射型xss的利用可以给对方发送钓鱼链接,窃取对方cookie,进入对方账户.   利用url重定向漏洞,发送给对方一个钓鱼链接,重定向到一个恶意网页,比如一个假的银行网站,被盗取账号密码 ...

  9. 'Python.exe' 不是内部或外部命令,也不是可运行的程序 或批处理文件。

    说明python不能被调用,需要为他制定正确的路径.0=0(win10想要打开任何东西,左下角搜索框) 1.打开 python,输入import os 输入os.getcwd,得到路径. 2.打开 编 ...

  10. 【DSP开发】C6000非多核非KeyStone系列DSP中断系统

    C6000系列DSP的中断系统 上一篇介绍了C6455的GPIO系统,最后把GPIO4配置成了中断/事件模式,本文将介绍C6455的中断系统,介绍完基本概念后,给出把GPIO4映射到INT4的代码. ...