1,

js代码
function ntabs(thisObj,Num)
            {if(thisObj.className == "active")return;  
            var tabObj = thisObj.parentNode.id;  
            var tabList = document.getElementById(tabObj).getElementsByTagName("li");  
            for(i=0; i <tabList.length; i++)
                {if (i == Num)
                    {thisObj.className = "active";  
                    document.getElementById(tabObj+"_cont"+i).style.display = "block";  
                    }
                    else{  
                        tabList[i].className = "normal";  
                        document.getElementById(tabObj+"_cont"+i).style.display = "none";  
                }  
            }  
        }

html:

<div class="hot_news">

<div class="title">
<ul id="mytab1">
<li class="active" onmousemove="ntabs(this,0);">医院动态</li>
<li class="normal" onmousemove="ntabs(this,1);">媒体报道</li>
<li class="normal" onmousemove="ntabs(this,2);">权威技术</li>
</ul>
</div>
<div class="content">
<div class="cont_01" id="mytab1_cont0">
<div><img src="/static/images/2z_04.jpg" width="130px;" height="125px;" />
<h3>新年3重礼,蜕变迎新春</h3>
<p>新的一年即将到来,在这个冬天里,你却惶恐不安,只因为白斑的困扰。白癜风对患者的学习工作、社...[<a style="color:#c13145; " href="#">详情</a>]</p></div>
<div>
<ul>
<li><img src="/static/images/2z_06.jpg" /><a href="#">新年3重礼,蜕变迎新春</a></li>
<li><img src="/static/images/2z_06.jpg" /><a href="#">新年3重礼,蜕变迎新春</a></li>
<li><img src="/static/images/2z_06.jpg" /><a href="#">新年3重礼,蜕变迎新春</a></li>
<li><img src="/static/images/2z_06.jpg" /><a href="#">新年3重礼,蜕变迎新春</a></li>
<li><img src="/static/images/2z_06.jpg" /><a href="#">新年3重礼,蜕变迎新春</a></li>
</ul>
</div>
</div>
<div class="cont_02 none" id="mytab1_cont1"></div>
<div class="cont_03 none" id="mytab1_cont2"></div>
</div>

</div>

css:

*{ margin: 0 auto; text-align: center; list-style: none; font-family: 微软雅黑; padding: 0; }
ul li{list-style:none;}
.hot_news{ float:left; width:360px; margin-right:15px; height:345px;}
.hot_news .title{ height:45px; widows:360px; margin-bottom:10px;}
.hot_news .title ul li{ float:left; width:120px; height:45px; line-height:45px; background:#eee;}
.hot_news .title .active{ background:#c13145; color:#fff; cursor:pointer;}
.hot_news .content img{ float:left; margin-right:10px;}
.hot_news .content h3{ font-weight:normal; height:35px; line-height:35px; display:block;}
.hot_news .content p{ line-height:24px; font-size:14px; text-indent:2em; text-align:left;}
.hot_news .content ul{ margin-top:5px;}
.hot_news .content ul li{ height:30px; line-height:30px; width:340px; overflow:hidden; text-align:left;}
.hot_news .content ul li img{ display:block; padding-top:11px;}
.hot_news .content ul li a{ color:#888;}
.hot_news .content ul li a:hover{ color:#c13145;}

2,
$(document).ready(function(){

var $tab_li = $('.tab ul li');

$tab_li.hover(function(){

$(this).addClass('selected').siblings().removeClass('selected');

var index = $tab_li.index(this);

$('div.tab_box > div').eq(index).show().siblings().hide();

});

});

tab切换的两段js

js切换换class的更多相关文章

  1. php网页切图/js切图

    PhantomJS抓取网站页面信息以及网站截图 http://phantomjs.org/download.html PHP imagegrabscreen和imagegrabwindow(截取网站缩 ...

  2. 独辟蹊径:逆推Krpano切图算法,实现在浏览器切多层级瓦片图

    前言 此文我首发于CSDN(所以里面的图片有它的水印) 趁着隔离梳理一下之前做的一个有用的功能:在浏览器中去切割多分辨率瓦片图 这是一个有趣的过程,跟我一起探索吧 阅读本文需具备前置知识:对krpan ...

  3. jsp+springmvc实现文件上传、图片上传和及时预览图片

    1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...

  4. rc.sysinit 解析

    $# :它可抓出 positional parameter 的數量,即脚本后面的参数有几个 $@和$*表示全部参数,但不包含脚本名,即$0,如果在command line上跑 my.sh p1 “p2 ...

  5. linux系统配置之开机启动过程(centos)

    1.开机流程如下: 2.BIOS BIOS是英文"Basic Input Output System"的缩略词,直译过来后中文名称就是"基本输入输出系统".其实 ...

  6. 基于HTML5和JS实现的切水果游戏

    切水果游戏曾经是一款风靡手机的休闲游戏,今天要介绍的就是一款网页版的切水果游戏, 由JavaSript和HTML5实现,虽然功能和原版的相差太大,但是基本的功能还是具备了,还是模仿的挺逼真,有一定的J ...

  7. vue基于video.js实现视频播放暂停---切图网

    切图网是最早致力于PSD2HTML切图等web前端外包服务的,随着前端技术的更新迭代,现在也已经全面投入了vue的浪潮了,下面是vue中实现视频播放的方法. vue.js中引入video视频播放器 m ...

  8. 在vue中继续使用layer.js来做弹出层---切图网

    layer.js是一个方便的弹出层插件,切图网专注于PSD2HTML等前端切图多年,后转向Vue开发.在vue开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导 ...

  9. [开发笔记]-页面切图、CSS前端设计、JS

    这两天在学习页面的切图,样式设计,把学习过程中注意的地方记录下来. 一. input输入框点击时去掉外边框 一般在IE,firefox下,设置 border:0 none; 即可.但在chrome下, ...

随机推荐

  1. GPUImage实现过程

    GPUImage就是一个函数的类库,用于对图片实现滤镜的效果. 下面是实现一个最简单的GPUImage的程序和讲解: 首先新建一个项目,导入GPUImage类库(导入过程在我的另一个博客里面有写). ...

  2. [git] git 分支( branch ) 的基本使用

    分支( branches ) 是指在开发主线中分离出来,做进一步开发而不影响到原来主线. Git 存储的不是一系列的更改集( changeset ),而是一系列快照.当你执行一次 commit 时, ...

  3. Snake - SGU 128(构造多边形)

    题目大意:有N个点,如果可以使用这N个点连接,连接的时候任意两条边要成直角,任意边都要平行于x轴或者y轴,并且不能出现跨立相交,最终组成一个闭合的多边形,求出来这个多边形的最小长度. 分析:容易证明这 ...

  4. poj 1258 Agri-Net【最小生成树(prime算法)】

    Agri-Net Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 44827   Accepted: 18351 Descri ...

  5. C#三种判断数据库中取出的字段值是否为空(NULL) 的方法

    操作数据库,需要判断返回的字段值是否为空,收集了3种方法供参考 1 通过System.DBNull判断,网上大部分都使用这个方法. DataTable dt;                     ...

  6. Dubbo xml配置 和注解配置 写法

    <?xml version="1.0" encoding="UTF-8"?><!-- - Copyright 1999-2011 Alibab ...

  7. fastjson 的简单说明及使用

    fastjson 是一个性能很好的 Java 语言实现的 JSON 解析器和生成器,来自阿里巴巴的工程师开发. 各个版本jar包下载地址:https://repo1.maven.org/maven2/ ...

  8. [Oracle] Data Pump 详细使用教程(4)- network_link

    [Oracle] Data Pump 详细使用教程(1)- 总览 [Oracle] Data Pump 详细使用教程(2)- 总览 [Oracle] Data Pump 详细使用教程(3)- 总览 [ ...

  9. Mysql重要配置参数的整理2

    http://ssydxa219.iteye.com/category/209848 下面开始优化下my.conf文件(这里的优化只是在mysql本身的优化,之前安装的时候也要有优化) cat /et ...

  10. HTML5移动开发中的input输入框类型

    HTML5规范引入了许多新的input输入框类型 在HTML5移动开发中,通过这些新的输入框类型来显示定制后的键盘布局,用户体验更好,更容易填写各种表单 本文中,实测手机为肾4S与米4 数字类型num ...