全面解析标签页的切换方式

标签页的切换方式如下所示:

1、控制tab的显示与隐藏

2、tab不切换,数据加载

控制tab的显示与隐藏

前端脚本:

1、jquery实现:

$(function(){
$(".sdkj-tabs li").click(function() {
$(this).addClass("on").siblings().removeClass("on");
var index=$(".sdkj-tabs li").index(this);
$(".cont-tabs>div").eq(index).show().siblings().hide();
});
});

引入jquery文件,代码简洁

jquery文件较大,浏览器不兼容

2、js 实现

function selectTab(showContent,selfObj){
var tab = document.getElementById("sdkj-tabs").getElementsByTagName("li");
var tablength = tab.length;
for(i=0; i<tablength; i++){
tab[i].className = "";
}
selfObj.className = "on";
// 标签页切换
for(i=0; j=document.getElementById("cont-tab"+i); i++){
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}

无需引入jquery文件

代码量大,需每个标签添加函数及ID

3、插件实现

var tabs=function(){
function tag(name,elem){
return (elem||document).getElementsByTagName(name);
}
//获得相应ID的元素
function id(name){
return document.getElementById(name);
}
function first(elem){
elem=elem.firstChild;
return elem&&elem.nodeType==1? elem:next(elem);
}
function next(elem){
elem=elem.nextSibling;
while(elem){
if(elem.nodeType==1){
return elem;
}
else{
elem=elem.nextSibling;
}
}
}
function child(elem){
var arrays = new Array();
var array_int=0;
var elem_child=first(elem);
for(array_int=0;elem_child;array_int++){
//console.log("elem:"+elem);
arrays[array_int]=elem_child;
elem_child=next(elem_child);
}
return arrays;
}
return {
set:function(elemId,tabId){
var elem=tag("li",id(elemId));
var tabs=child(id(tabId));
var listNum=elem.length;
var tabNum=tabs.length;
console.log(tabs);
for(var i=0;i<listNum;i++){
elem[i].onclick=(function(i){
return function(){
for(var j=0;j<3;j++){
if(i==j){
tabs[j].style.display="block";
elem[j].className="on";
}
else{
tabs[j].style.display="none";
elem[j].className=" ";
}
}
}
})(i)
}
}
}
}();
tabs.set("sdkj-tabs","cont-tabs");//执行

无需引入jquery文件,只需添加父元素ID

以上所述是小编给大家介绍的全面解析标签页的切换方式的全部叙述,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2016-08-19

基于jQuery实现多标签页切换的效果(web前端开发)

这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,html和css代码如下: <ul id="tab"> <li id="tab1" onclick="show(1)">10元套餐</li> <li id="tab2" onclick=&quo

最简单纯JavaScript实现Tab标签页切换的方式(推荐)

先说一下最土的一种方法: Html: <div class="tab-head"> <h2 id="tab1" onmouseover="changeTab1()" class="selected">1</h2> <h2 id="tab2" onmouseover="changeTab2()">2</h2> <h2 id=

JS实现切换标签页效果实例代码

在网页<head>区添加以下代码 复制代码 代码如下: <style type="text/css">  <!--  BODY {  PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: black; LINE-HEIGHT: 150%; PADDING-TOP: 10px; BACKGROUND-COLOR

javaScript+turn.js实现图书翻页效果实例代码

为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 turn.js 如何使用!!!!!!! 文章最后提供源码下载,结合源码看本文,turn.js更简单! 首先附上个人的文件路径 对于css   和 js文件不需要过多的解释   在这里要注意的是pages文件夹   这里个文件夹下放的是需要预览的图片文件   

原生JS实现的放大镜效果实例代码

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style

android ViewPager实现滑动翻页效果实例代码

实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.view.View; public class ReadViewPager extends ViewPager { public ReadV

NGUI实现滑动翻页效果实例代码

废话不多说了,直接给大家上干货了. 具体代码如下所示: using UnityEngine; using System.Collections; public class PageView : MonoBehaviour { const int ITEM_NUM = 2; //总页数 const int PAGE_WIDTH = 2048; //页宽 const float DRAG_SPEED = 0.5f; //翻页时间 const int DRAG_OFFECT = 30; //滑动的起点

js图片加载效果实例代码(延迟加载+瀑布流加载)

主要做了两种图片加载的效果 一种是遇到页面图片比较多的时候,带读条效果的加载提示(为了验证正确加载,设置了1秒钟的加载间隔时间) 另外一种是根据滑块的位置进行图片的预加载,在用户不察觉的情况下,实现瀑布流的加载效果 一 延迟加载 主要思路: HTML的img标签中,将正确的地址存在data-src属性中,给所有图片设置一个转圈圈的loading图片作为background js中,依次读取每一个img,将data-src中的地址替换到src中,去掉background 每成功加载一张图片,进度条

原生JS可拖动弹窗效果实例代码

这个代码不是我原创的,只是最近想学自己做一个很漂亮的弹窗,自己本来是不会怎么写的,所以上网去找了下,感觉这个不错,很简单,很实用,入门很棒.我就改了下,使逻辑性和可读性更好. 原作者已不可考.感谢原作者,阿门. 复制代码 代码如下: <html>    <head>        <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/>       

js实现收缩菜单效果实例代码

废话不多说,直接上代码: 有注释 复制代码 代码如下: <head>    <title></title>    <style type="text/css">        div        {            border: 1px solid black;            width: 100px;        }        ul .tit, .content        {            list-

js 表格拖拽效果实例代码 (IE only)

Table Test (I.E. Only) /*得到表格列*/ function getCols(srcCellIndex,obj) { obj = typeof obj === 'string' ? document.getElementById(obj) : obj; var s = ''; s += ' ' s += obj.rows[0].cells[srcCellIndex].innerHTML + ' '; for(var i = 1;i ' + obj.rows[i].cells

react.js 翻页插件实例代码

废话不多说了,下面给大家分享react.js翻页插件的代码,具体代码如下所示: var Page = React.createClass({ render:function() { //中间代码更新 var totalRows = this.props.totalRows; var listRows = this.props.listRows; var nowPage = this.props.nowPage>0?this.props.nowPage:1; var firstRow = this