黄国瑞博客

首页 > web前端开发 > 一款基于bootstrap和jquery的tab切换效果经典实现方式

一款基于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>

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

以上就是黄国瑞博客带来的《一款基于bootstrap和jquery的tab切换效果经典实现方式》,非常感谢您的观看!如果没有相关文字说明,本文即为黄国瑞博客原创(www.huangguorui.cn),欢迎读者转载并保留本站版权!

以上就是一款基于bootstrap和jquery的tab切换效果经典实现方式的详细内容,更多请持续关注本站其它相关文章!

标签:

浏览了该文章的用户还浏览了以下文章:

共有 0 条评论

本站是一个关注web前端发展和注重SEO优化的个人网站,提供最新的web前端资讯,专注web前端开发,分享各种所遇问题解决方法与个人心得,同时分享前端资源和工具等,并提供HTML5模板的下载,期待你的参与!

热门评论

友情链接

友链可以提升搜索引擎友好度,欢迎大家踊跃互添友链!仅限同行业【程序类网站】。有意向的小伙伴可以在网站注册账号给我留言!

Top

如有疑问,可联系我: