欢迎光临
我们一直在努力

一款基于bootstrap和jquery的tab切换效果经典实现方式

近日,Smile_Blog主题的后台管理界面已经初步进行了完善,为了规范后台系统的管理,使展现的效果更加的直观,我特意写了这个tab栏目切换,其中使用了localStorage本地缓存技术,让页面不随着提交而重置到第一个按钮显示的页面处,当用户点击第二个按钮之后,如果再用这个浏览器打开,将还是显示第二个按钮所要显示的内容

源码展示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="./bootstrap.css">

    <script src="./jquery-2.1.4.min.js"></script>
    <style>
        .box {
            width: 800px;
            min-height: 500px;
            border: 1px solid red;
            background: #ccc;
            padding: 20px;
            box-sizing: border-box;
        }

        .tab {
            width: 100%;
            height: auto;
            padding-top: 20px;
            box-sizing: border-box;
            display: none;
        }

        .hots {
            background: #f1f1f1;
            min-height: 30px;
            margin-top: 20px;
            line-height: 30px;
            text-indent: 2em;
            padding: 10px;
            border-radius: 5px;
            box-sizing: border-box;

        }

        .tab:nth-child(1) {
            display: block;

        }

        .curbtn {
            background-color: #337ab7 !important;
            border-color: #2e6da4 !important;
            color: #fff !important;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
            <input class="btn btn-default curbtn" type="button" value="SEO优化设置">
            <input class="btn btn-default " type="button" value="基本设置">
            <input class="btn btn-default " type="button" value="图片显示设置">
            <input class="btn btn-default " type="submit" value="联系方式设置">

            <div class="hots">
            </div>

            <form action="">
                <div class="tab">
                    <div class="form-group">
                        <label for="index_url">请设置路径:</label>
                        <textarea class="form-control" rows="6" id="index_url" placeholder="请设置路径:"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="index_title">请设置标题:</label>
                        <textarea class="form-control" rows="6" id="index_title" placeholder="请设置标题:"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="index_keys">请设置关键词:</label>
                        <textarea class="form-control" rows="6" id="index_keys" placeholder="请设置关键词:"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="index_desc">请设置描述:</label>
                        <textarea class="form-control" rows="6" id="index_desc" placeholder="请设置描述:"></textarea>
                    </div>
                </div>
                <div class="tab">
                    <div class="form-group">
                        <label for="index_url">网站底部简介:</label>
                        <textarea class="form-control" rows="4" id="index_url" placeholder="网站底部简介:"></textarea>
                    </div>
                    <h3>侧边栏目【slider】配置</h3>
                    <div class="form-group">
                        <label for="index_url">网站全局介绍:</label>
                        <textarea class="form-control" rows="4" id="index_url" placeholder="网站全局介绍:"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="index_url">友情链接简介:</label>
                        <textarea class="form-control" rows="4" id="index_url" placeholder="友情链接简介:"></textarea>
                    </div>

                    <div class="radio">
                        <label>
                            <input type="radio" name="blankRadio" value="0" aria-label="...">关闭
                        </label>
                        <label>
                            <input type="radio" name="blankRadio" value="1" aria-label="...">开启
                        </label>
                        <span>【默认开启】评论栏栏目设置</span>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="blankRadio" value="0" aria-label="...">关闭
                        </label>
                        <label>
                            <input type="radio" name="blankRadio" value="1" aria-label="...">开启
                        </label>
                        <span>【默认开启】友情链接栏目设置</span>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="blankRadio" value="0" aria-label="...">关闭
                        </label>
                        <label>
                            <input type="radio" name="blankRadio" value="1" aria-label="...">开启
                        </label>
                        <span>【默认开启】随机文章栏目设置</span>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="blankRadio" value="0" aria-label="...">关闭
                        </label>
                        <label>
                            <input type="radio" name="blankRadio" value="1" aria-label="...">开启
                        </label>
                        <span>【默认开启】标签云栏目设置</span>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="blankRadio" value="0" aria-label="...">关闭
                        </label>
                        <label>
                            <input type="radio" name="blankRadio" value="1" aria-label="...">开启
                        </label>
                        <span>【默认开启】最新文章栏目设置</span>
                    </div>
                </div>
                <div class="tab">
                    <div class="form-group">
                        <label for="index_url">请设置路径:</label>
                        <textarea class="form-control" rows="6" id="index_url" placeholder="请设置路径:"></textarea>
                    </div>
                </div>
                <div class="tab">
                    <div class="form-group">
                        <label for="index_url">请设置路径:</label>
                        <textarea class="form-control" rows="6" id="index_url" placeholder="请设置路径:"></textarea>
                    </div>
                </div>
                <input class="btn btn-primary" type="submit" value="点击保存">

            </form>

        </div>
    </div>
</body>

</html>
<script>
    let hots = [{
        text: 'SEO优化设置:每一个Url对应一个标题,一串关键词,一段描述,结尾均已英文状态下的逗号结尾,且每一条记录都需要换一行'
    }, {
        text: '基本设置:主要可以设置侧边栏目各种个性化显示,自定义文字等,功能持续开发中……'
    }, {
        text: '图片显示设置:主要用来上传用户Logo,以及一些需要显示图片的地方,待完成'
    }, {
        text: '联系方式设置:主要用来设置网站上你的联系方式'
    }];
    $('.hots').eq(0).html(hots[0].text)

    var store = {
        save(key, value) {
            localStorage.setItem(key, JSON.stringify(value));
        },
        fetch(key) {
            return JSON.parse(localStorage.getItem(key)) || [];
        }
    }

    //先判断有没有,在进行赋值
    if (store.fetch('curindex') != '') {
        let val = store.fetch('curindex')
        tabs(val)
    } else {
        console.log('没有值默认就显示第一个')
        $('.tab').eq(0).css('display', 'block');
    }




    $('.box>input').each(function (index) {
        console.log('index=', index)
        $('.btn').eq(index).click(function () {
            tabs(index)
            //保存数据
            store.save('curindex',
                index
            )
        })
    })

    //定义切换函数

    function tabs(i) {
        $('.box >input').removeClass('curbtn')
        $('.box >input').eq(i).addClass('curbtn')
        $('.tab').css('display', 'none');
        $('.tab').eq(i).css('display', 'block');
        $('.hots').html(hots[i].text)
    }
</script>

因为是本站主题用来对网站进行管理的界面,所以设计还是比较考究的,
如图所示:
如有不足之处,还请指出,本站将作出修改。

赞(0) 打赏
未经允许不得转载: » 一款基于bootstrap和jquery的tab切换效果经典实现方式
分享到: 更多 (0)

评论标题 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    一款不错的tab切换界面,不错不错

    一个正在学习web前端的小萌新2个月前 (09-29)回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏