https://www.51daifu.com/resource/www/js/common.js

1// ******* 原生js选项卡切换 *******
2function DTab(title, content, jQEvent) {
3    /*
4        title 选项卡按钮包裹容器元素名
5        content 选项卡内容包裹容器/选项卡内容包裹容器元素名
6        jQEvent jQuery事件名
7    */
8    this.title = title;
9    this.content = content;
10    this.jQEvent = jQEvent;
11}
12DTab.prototype = {
13    constructor: DTab,
14    createOpt: function () {
15        var _this = this;
16        var switchL = typeof _this.title === 'string' ? document.querySelectorAll(_this.title) : _this.title;
17        var switchT = [];
18        for (var i = 0; i < switchL.length; i++) {
19            switchT.push(switchL[i]);
20        }
21        if (switchT[0] === undefined || switchT[0].nodeName === undefined) {
22            return console.log('选项卡按钮包裹容器错误');
23        }
24        switchT.forEach(function (item) {
25            item.addEventListener(_this.jQEvent,function () {
26                var el = event.target;
27                // 获取触发事件的元素 cutA;
28                var cutA = _this.findParent(el,this.nodeName);
29                if (cutA === false) return;
30                // 获取当前下标 index
31                var index = 0;
32                var ele = cutA;
33                while (ele.previousSibling !== null) {
34                    ele = ele.previousSibling;
35                    if (ele.nodeType != 3) {
36                        index++;
37                    }
38                }
39                if (!cutA.classList.contains('active')) {
40                    // 选项卡标签切换
41                    if (cutA.parentNode.querySelector(_this.title + '.active')) {
42                        cutA.parentNode.querySelector(_this.title + '.active').classList.remove('active');
43                    }
44                    cutA.classList.add('active');
45                    // 获取选项卡内容元素 nextCon;
46                    var nextCon = typeof _this.content === 'string' ? _this.switchCon(item,_this.content) : _this.content;
47                    if (nextCon[0] === undefined || nextCon[0].nodeName === undefined) {
48                        return console.log('选项卡内容包裹容器错误');
49                    }
50                    // 选项卡内容切换
51                    if (nextCon[0].parentNode.querySelector(_this.content + '.active')) {
52                        nextCon[0].parentNode.querySelector(_this.content + '.active').classList.remove('active');
53                    }
54                    if (nextCon[index] === undefined) {
55                        return;
56                    }else {
57                        if (nextCon[index].classList.contains('active')) return;
58                        nextCon[index].classList.add('active');
59                    }
60                }
61            },false);
62        })
63    },
64    // 获取触发事件的元素
65    findParent: function (el,name) {
66        if (el === null) {
67            return false;
68        }else {
69            if (el.nodeName !== name) {
70                return this.findParent(el.parentNode,name);
71            }
72            return el;
73        }
74    },
75    // 获取触发事件切换的元素
76    switchCon: function (el,con) {
77        if (el === null) {
78            return false;
79        }else {
80            var eventCon = el.parentNode.parentNode.querySelectorAll(con);
81            if (eventCon.length === 0) {
82                return this.switchCon(el.parentNode,con);
83            }else {
84                return eventCon;
85            }
86        }
87    },
88}
89
90// ******* 基于JQuery返回顶部 *******
91function returnTop() {
92    var num = $(window).scrollTop();
93    if (num > 1000) {
94        num = 1000;
95    }
96    if (num > 0) {
97        setTimeout(function() {
98            $(window).scrollTop(num - 20);
99            returnTop();
100        }, 1);
101    }
102    return;
103};
104
105// ******* 获取数据 *******
106function getServer(url, param, _callback) {
107    $.ajax({

108        url: url,
109        type: "post",
110        data: param,
111        success: function(ret) {
112            _callback(ret);
113        },
114        error: function(ret) {
115            $.alert('状态码：' + ret.status, '加载遇到问题');
116            console.log(ret);
117        }
118    })
119}