您现在的位置是:首页 > 网站制作 > 网站建设网站建设

个人博客添加响应式全屏切换标签

胜于蓝2019-11-05【网站建设】人已围观

简介Html 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

HtmlTXR胜于蓝|优秀个人博客

1TXR胜于蓝|优秀个人博客
2TXR胜于蓝|优秀个人博客
3TXR胜于蓝|优秀个人博客
4TXR胜于蓝|优秀个人博客
5TXR胜于蓝|优秀个人博客
6TXR胜于蓝|优秀个人博客
7TXR胜于蓝|优秀个人博客
8TXR胜于蓝|优秀个人博客
9TXR胜于蓝|优秀个人博客
10TXR胜于蓝|优秀个人博客
11TXR胜于蓝|优秀个人博客
12TXR胜于蓝|优秀个人博客
13TXR胜于蓝|优秀个人博客
14TXR胜于蓝|优秀个人博客
15TXR胜于蓝|优秀个人博客
16TXR胜于蓝|优秀个人博客
17TXR胜于蓝|优秀个人博客
18TXR胜于蓝|优秀个人博客
19TXR胜于蓝|优秀个人博客
20TXR胜于蓝|优秀个人博客
21TXR胜于蓝|优秀个人博客
22TXR胜于蓝|优秀个人博客
23TXR胜于蓝|优秀个人博客
24TXR胜于蓝|优秀个人博客
25TXR胜于蓝|优秀个人博客
26TXR胜于蓝|优秀个人博客
27TXR胜于蓝|优秀个人博客
28TXR胜于蓝|优秀个人博客
29TXR胜于蓝|优秀个人博客
30TXR胜于蓝|优秀个人博客
31TXR胜于蓝|优秀个人博客
32TXR胜于蓝|优秀个人博客
33TXR胜于蓝|优秀个人博客
34TXR胜于蓝|优秀个人博客
35TXR胜于蓝|优秀个人博客
36TXR胜于蓝|优秀个人博客
37TXR胜于蓝|优秀个人博客
38TXR胜于蓝|优秀个人博客
39TXR胜于蓝|优秀个人博客
40TXR胜于蓝|优秀个人博客
41TXR胜于蓝|优秀个人博客
42TXR胜于蓝|优秀个人博客
43TXR胜于蓝|优秀个人博客
44TXR胜于蓝|优秀个人博客
45TXR胜于蓝|优秀个人博客
46TXR胜于蓝|优秀个人博客
47TXR胜于蓝|优秀个人博客
48TXR胜于蓝|优秀个人博客
49TXR胜于蓝|优秀个人博客
50TXR胜于蓝|优秀个人博客
51TXR胜于蓝|优秀个人博客
52TXR胜于蓝|优秀个人博客
53TXR胜于蓝|优秀个人博客
54TXR胜于蓝|优秀个人博客
55TXR胜于蓝|优秀个人博客
56TXR胜于蓝|优秀个人博客
57TXR胜于蓝|优秀个人博客
58TXR胜于蓝|优秀个人博客
59TXR胜于蓝|优秀个人博客
60TXR胜于蓝|优秀个人博客
61TXR胜于蓝|优秀个人博客
62TXR胜于蓝|优秀个人博客
63TXR胜于蓝|优秀个人博客
64TXR胜于蓝|优秀个人博客
65TXR胜于蓝|优秀个人博客
66TXR胜于蓝|优秀个人博客
67TXR胜于蓝|优秀个人博客
68TXR胜于蓝|优秀个人博客
69TXR胜于蓝|优秀个人博客
70TXR胜于蓝|优秀个人博客
71TXR胜于蓝|优秀个人博客
72TXR胜于蓝|优秀个人博客
73TXR胜于蓝|优秀个人博客
74TXR胜于蓝|优秀个人博客
75TXR胜于蓝|优秀个人博客
76TXR胜于蓝|优秀个人博客
77TXR胜于蓝|优秀个人博客
78TXR胜于蓝|优秀个人博客
79TXR胜于蓝|优秀个人博客
80TXR胜于蓝|优秀个人博客
81TXR胜于蓝|优秀个人博客
82TXR胜于蓝|优秀个人博客
83TXR胜于蓝|优秀个人博客
84TXR胜于蓝|优秀个人博客
85TXR胜于蓝|优秀个人博客
86TXR胜于蓝|优秀个人博客
87TXR胜于蓝|优秀个人博客
88TXR胜于蓝|优秀个人博客
89TXR胜于蓝|优秀个人博客
90TXR胜于蓝|优秀个人博客
91TXR胜于蓝|优秀个人博客
92TXR胜于蓝|优秀个人博客
93TXR胜于蓝|优秀个人博客
94TXR胜于蓝|优秀个人博客
95TXR胜于蓝|优秀个人博客
96TXR胜于蓝|优秀个人博客
97TXR胜于蓝|优秀个人博客
98TXR胜于蓝|优秀个人博客
99TXR胜于蓝|优秀个人博客
100TXR胜于蓝|优秀个人博客
101TXR胜于蓝|优秀个人博客
102
<div id="tabs" class="tabs">TXR胜于蓝|优秀个人博客
    <nav>TXR胜于蓝|优秀个人博客
        <ul>TXR胜于蓝|优秀个人博客
            <li><a href="#section-1" class="icon-shop"><span>Shop</span></a></li>TXR胜于蓝|优秀个人博客
            <li><a href="#section-2" class="icon-cup"><span>Drinks</span></a></li>TXR胜于蓝|优秀个人博客
            <li><a href="#section-3" class="icon-food"><span>Food</span></a></li>TXR胜于蓝|优秀个人博客
            <li><a href="#section-4" class="icon-lab"><span>Lab</span></a></li>TXR胜于蓝|优秀个人博客
            <li><a href="#section-5" class="icon-truck"><span>Order</span></a></li>TXR胜于蓝|优秀个人博客
        </ul>TXR胜于蓝|优秀个人博客
    </nav>TXR胜于蓝|优秀个人博客
    <div class="content">TXR胜于蓝|优秀个人博客
        <section id="section-1">TXR胜于蓝|优秀个人博客
            <div class="mediabox">TXR胜于蓝|优秀个人博客
                <img src="img/01.png" alt="img01" />TXR胜于蓝|优秀个人博客
                <h3>Sushi Gumbo Beetroot</h3>TXR胜于蓝|优秀个人博客
                <p>Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p>TXR胜于蓝|优秀个人博客
            </div>TXR胜于蓝|优秀个人博客
            <div class="mediabox">TXR胜于蓝|优秀个人博客
                <img src="img/02.png" alt="img02" />TXR胜于蓝|优秀个人博客
                <h3>Pea Sprouts Fava Soup</h3>TXR胜于蓝|优秀个人博客
                <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p>TXR胜于蓝|优秀个人博客
            </div>TXR胜于蓝|优秀个人博客
            <div class="mediabox">TXR胜于蓝|优秀个人博客
                <img src="img/03.png" alt="img03" />TXR胜于蓝|优秀个人博客
                <h3>Turnip Broccoli Sashimi</h3>TXR胜于蓝|优秀个人博客
                <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip.</p>TXR胜于蓝|优秀个人博客
            </div>TXR胜于蓝|优秀个人博客
        </section>TXR胜于蓝|优秀个人博客
        <section id="section-2">TXR胜于蓝|优秀个人博客
            <div class="mediabox">TXR胜于蓝|优秀个人博客
                <img src="img/04.png" alt="img04" />TXR胜于蓝|优秀个人博客
                <h3>Asparagus Cucumber Cake</h3>TXR胜于蓝|优秀个人博客
                <p>Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p>TXR胜于蓝|优秀个人博客
            </div>TXR胜于蓝|优秀个人博客
            <div class="mediabox">TXR胜于蓝|优秀个人博客
                <img src="img/05.png" alt="img05" />TXR胜于蓝|优秀个人博客
                <h3>Magis Kohlrabi Gourd</h3>TXR胜于蓝|优秀个人博客
                <p>Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p>TXR胜于蓝|优秀个人博客
            </div>TXR胜于蓝|优秀个人博客
            <div class="mediabox">TXR胜于蓝|优秀个人博客
                <img src="img/06.png" alt="img06" />TXR胜于蓝|优秀个人博客
                <h3>Ricebean Rutabaga</h3>TXR胜于蓝|优秀个人博客
                <p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. </p>TXR胜于蓝|优秀个人博客
            </div>TXR胜于蓝|优秀个人博客
        </section>TXR胜于蓝|优秀个人博客
        <section id="section-3">TXR胜于蓝|优秀个人博客
            <div class="mediabox">TXR胜于蓝|优秀个人博客
                <img src="img/02.png" alt="img02" />TXR胜于蓝|优秀个人博客
                <h3>Noodle Curry</h3>TXR胜于蓝|优秀个人博客
                <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.Sushi gumbo beet greens corn soko endive gumbo gourd.</p>TXR胜于蓝|优秀个人博客
            </div>TXR胜于蓝|优秀个人博客
            <div class="mediabox">TXR胜于蓝|优秀个人博客
                <img src="img/06.png" alt="img06" />TXR胜于蓝|优秀个人博客
                <h3>Leek Wasabi</h3>TXR胜于蓝|优秀个人博客
                <p>Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p>TXR胜于蓝|优秀个人博客
            </div>TXR胜于蓝|优秀个人博客
            <div class="mediabox">TXR胜于蓝|优秀个人博客
                <img src="img/01.png" alt="img01" />TXR胜于蓝|优秀个人博客
                <h3>Green Tofu Wrap</h3>TXR胜于蓝|优秀个人博客
                <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut wasabi tofu broccoli mixture soup.</p>TXR胜于蓝|优秀个人博客
            </div>TXR胜于蓝|优秀个人博客
        </section>TXR胜于蓝|优秀个人博客
        <section id="section-4">TXR胜于蓝|优秀个人博客
            <div class="mediabox">TXR胜于蓝|优秀个人博客
                <img src="img/03.png" alt="img03" />TXR胜于蓝|优秀个人博客
                <h3>Tomato Cucumber Curd</h3>TXR胜于蓝|优秀个人博客
                <p>Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p>TXR胜于蓝|优秀个人博客
            </div>TXR胜于蓝|优秀个人博客
            <div class="mediabox">TXR胜于蓝|优秀个人博客
                <img src="img/01.png" alt="img01" />TXR胜于蓝|优秀个人博客
                <h3>Mushroom Green</h3>TXR胜于蓝|优秀个人博客
                <p>Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p>TXR胜于蓝|优秀个人博客
            </div>TXR胜于蓝|优秀个人博客
            <div class="mediabox">TXR胜于蓝|优秀个人博客
                <img src="img/04.png" alt="img04" />TXR胜于蓝|优秀个人博客
                <h3>Swiss Celery Chard</h3>TXR胜于蓝|优秀个人博客
                <p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. </p>TXR胜于蓝|优秀个人博客
            </div>TXR胜于蓝|优秀个人博客
        </section>TXR胜于蓝|优秀个人博客
        <section id="section-5">TXR胜于蓝|优秀个人博客
            <div class="mediabox">TXR胜于蓝|优秀个人博客
                <img src="img/02.png" alt="img02" />TXR胜于蓝|优秀个人博客
                <h3>Radish Tomato</h3>TXR胜于蓝|优秀个人博客
                <p>Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.</p>TXR胜于蓝|优秀个人博客
            </div>TXR胜于蓝|优秀个人博客
            <div class="mediabox">TXR胜于蓝|优秀个人博客
                <img src="img/06.png" alt="img06" />TXR胜于蓝|优秀个人博客
                <h3>Fennel Wasabi</h3>TXR胜于蓝|优秀个人博客
                <p>Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic.</p>TXR胜于蓝|优秀个人博客
            </div>TXR胜于蓝|优秀个人博客
            <div class="mediabox">TXR胜于蓝|优秀个人博客
                <img src="img/01.png" alt="img01" />TXR胜于蓝|优秀个人博客
                <h3>Red Tofu Wrap</h3>TXR胜于蓝|优秀个人博客
                <p>Green horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut wasabi tofu broccoli mixture soup.</p>TXR胜于蓝|优秀个人博客
            </div>TXR胜于蓝|优秀个人博客
        </section>TXR胜于蓝|优秀个人博客
    </div><!-- /content -->TXR胜于蓝|优秀个人博客
</div><!-- /tabs -->TXR胜于蓝|优秀个人博客
<script src="js/cbpFWTabs.js"></script>TXR胜于蓝|优秀个人博客
<script>TXR胜于蓝|优秀个人博客
    new CBPFWTabs( document.getElementById( 'tabs' ) );TXR胜于蓝|优秀个人博客
</script>

CssTXR胜于蓝|优秀个人博客

1TXR胜于蓝|优秀个人博客
2TXR胜于蓝|优秀个人博客
3TXR胜于蓝|优秀个人博客
4TXR胜于蓝|优秀个人博客
5TXR胜于蓝|优秀个人博客
6TXR胜于蓝|优秀个人博客
7TXR胜于蓝|优秀个人博客
8TXR胜于蓝|优秀个人博客
9TXR胜于蓝|优秀个人博客
10TXR胜于蓝|优秀个人博客
11TXR胜于蓝|优秀个人博客
12TXR胜于蓝|优秀个人博客
13TXR胜于蓝|优秀个人博客
14TXR胜于蓝|优秀个人博客
15TXR胜于蓝|优秀个人博客
16TXR胜于蓝|优秀个人博客
17TXR胜于蓝|优秀个人博客
18TXR胜于蓝|优秀个人博客
19TXR胜于蓝|优秀个人博客
20TXR胜于蓝|优秀个人博客
21TXR胜于蓝|优秀个人博客
22TXR胜于蓝|优秀个人博客
23TXR胜于蓝|优秀个人博客
24TXR胜于蓝|优秀个人博客
25TXR胜于蓝|优秀个人博客
26TXR胜于蓝|优秀个人博客
27TXR胜于蓝|优秀个人博客
28TXR胜于蓝|优秀个人博客
29TXR胜于蓝|优秀个人博客
30TXR胜于蓝|优秀个人博客
31TXR胜于蓝|优秀个人博客
32TXR胜于蓝|优秀个人博客
33TXR胜于蓝|优秀个人博客
34TXR胜于蓝|优秀个人博客
35TXR胜于蓝|优秀个人博客
36TXR胜于蓝|优秀个人博客
37TXR胜于蓝|优秀个人博客
38TXR胜于蓝|优秀个人博客
39TXR胜于蓝|优秀个人博客
40TXR胜于蓝|优秀个人博客
41TXR胜于蓝|优秀个人博客
42TXR胜于蓝|优秀个人博客
43TXR胜于蓝|优秀个人博客
44TXR胜于蓝|优秀个人博客
45TXR胜于蓝|优秀个人博客
46TXR胜于蓝|优秀个人博客
47TXR胜于蓝|优秀个人博客
48TXR胜于蓝|优秀个人博客
49TXR胜于蓝|优秀个人博客
50TXR胜于蓝|优秀个人博客
51
.tabs { positionrelativewidth100%overflowhiddenmargin1em 0 2emfont-weight300; }TXR胜于蓝|优秀个人博客
/* Nav */TXR胜于蓝|优秀个人博客
.tabs nav { text-aligncenter; }TXR胜于蓝|优秀个人博客
.tabs nav ul { padding0margin0list-stylenonedisplay: inline-block; }TXR胜于蓝|优秀个人博客
.tabs nav ul li { border1px solid #becbd2border-bottomnonemargin0 0.25emdisplayblockfloatleftpositionrelative; }TXR胜于蓝|优秀个人博客
.tabs nav li.tab-current { border1px solid #47a3da; box-shadow: inset 0 2px #47a3daborder-bottomnonez-index100; }TXR胜于蓝|优秀个人博客
.tabs nav li.tab-current:before, .tabs nav li.tab-current:after { content''positionabsoluteheight1pxright100%bottom0width1000pxbackground#47a3da; }TXR胜于蓝|优秀个人博客
.tabs nav li.tab-current:after { rightautoleft100%width4000px; }TXR胜于蓝|优秀个人博客
.tabs nav a { color#becbd2displayblockfont-size1.45emline-height2.5padding0 1.25emwhite-spacenowrap; }TXR胜于蓝|优秀个人博客
.tabs nav a:hover { color#768e9d; }TXR胜于蓝|优秀个人博客
.tabs nav li.tab-current a { color#47a3da; }TXR胜于蓝|优秀个人博客
/* Icons */TXR胜于蓝|优秀个人博客
.tabs nav a:before { display: inline-blockvertical-alignmiddletext-transformnonefont-weightnormalfont-variantnormalfont-family'icomoon'line-height1speaknone; -webkit-font-smoothing: antialiased; margin-0.25em 0.4em 0 0; }TXR胜于蓝|优秀个人博客
.icon-food:before { content"e600"; }TXR胜于蓝|优秀个人博客
.icon-lab:before { content"e601"; }TXR胜于蓝|优秀个人博客
.icon-cup:before { content"e602"; }TXR胜于蓝|优秀个人博客
.icon-truck:before { content"e603"; }TXR胜于蓝|优秀个人博客
.icon-shop:before { content"e604"; }TXR胜于蓝|优秀个人博客
/* Content */TXR胜于蓝|优秀个人博客
.content section { font-size1.25empadding3em 1emdisplaynonemax-width1230pxmargin0 auto; }TXR胜于蓝|优秀个人博客
.content section:before, .content section:after { content''display: table; }TXR胜于蓝|优秀个人博客
.content section:after { clearboth; }TXR胜于蓝|优秀个人博客
/* Fallback example */TXR胜于蓝|优秀个人博客
.no-js .content section { displayblockpadding-bottom2emborder-bottom1px solid #47a3da; }TXR胜于蓝|优秀个人博客
.content section.content-current { displayblock; }TXR胜于蓝|优秀个人博客
.mediabox { floatleftwidth33%padding0 25px; }TXR胜于蓝|优秀个人博客
.mediabox img { max-width100%displayblockmargin0 auto; }TXR胜于蓝|优秀个人博客
.mediabox h3 margin0.75em 0 0.5em; }TXR胜于蓝|优秀个人博客
.mediabox p { padding0 0 1em 0margin0line-height1.3; }TXR胜于蓝|优秀个人博客
 TXR胜于蓝|优秀个人博客
/* Example media queries */TXR胜于蓝|优秀个人博客
 TXR胜于蓝|优秀个人博客
@media screen and (max-width52.375em) {TXR胜于蓝|优秀个人博客
.tabs nav a span { displaynone; }TXR胜于蓝|优秀个人博客
.tabs nav a:before { margin-right0; }TXR胜于蓝|优秀个人博客
.mediabox { floatnonewidthautopadding0 0 35px 0font-size90%; }TXR胜于蓝|优秀个人博客
.mediabox img { floatleftmargin0 25px 10px 0max-width40%; }TXR胜于蓝|优秀个人博客
.mediabox h3 margin-top0; }TXR胜于蓝|优秀个人博客
.mediabox p { margin-left40%margin-left: calc(40% 25px); }TXR胜于蓝|优秀个人博客
.mediabox:before,  .mediabox:after { content''display: table; }TXR胜于蓝|优秀个人博客
.mediabox:after { clearboth; }TXR胜于蓝|优秀个人博客
}TXR胜于蓝|优秀个人博客
 @media screen and (max-width32em) {TXR胜于蓝|优秀个人博客
.tabs nav ul,  .tabs nav ul li a { width100%padding0; }TXR胜于蓝|优秀个人博客
.tabs nav ul li { width20%width: calc(20% 1px); margin0 0 0 -1px; }TXR胜于蓝|优秀个人博客
.tabs nav ul li:last-child { border-rightnone; }TXR胜于蓝|优秀个人博客
.mediabox { text-aligncenter; }TXR胜于蓝|优秀个人博客
.mediabox img { floatnonemargin0 automax-width100%; }TXR胜于蓝|优秀个人博客
.mediabox h3 margin1.25em 0 1em; }TXR胜于蓝|优秀个人博客
.mediabox p { margin0; }TXR胜于蓝|优秀个人博客
}

javascriptTXR胜于蓝|优秀个人博客

1TXR胜于蓝|优秀个人博客
2TXR胜于蓝|优秀个人博客
3TXR胜于蓝|优秀个人博客
4TXR胜于蓝|优秀个人博客
5TXR胜于蓝|优秀个人博客
6TXR胜于蓝|优秀个人博客
7TXR胜于蓝|优秀个人博客
8TXR胜于蓝|优秀个人博客
9TXR胜于蓝|优秀个人博客
10TXR胜于蓝|优秀个人博客
11TXR胜于蓝|优秀个人博客
12TXR胜于蓝|优秀个人博客
13TXR胜于蓝|优秀个人博客
14TXR胜于蓝|优秀个人博客
15TXR胜于蓝|优秀个人博客
16TXR胜于蓝|优秀个人博客
17TXR胜于蓝|优秀个人博客
18TXR胜于蓝|优秀个人博客
19TXR胜于蓝|优秀个人博客
20TXR胜于蓝|优秀个人博客
21TXR胜于蓝|优秀个人博客
22TXR胜于蓝|优秀个人博客
23TXR胜于蓝|优秀个人博客
24TXR胜于蓝|优秀个人博客
25TXR胜于蓝|优秀个人博客
26TXR胜于蓝|优秀个人博客
27TXR胜于蓝|优秀个人博客
28TXR胜于蓝|优秀个人博客
29TXR胜于蓝|优秀个人博客
30TXR胜于蓝|优秀个人博客
31TXR胜于蓝|优秀个人博客
32TXR胜于蓝|优秀个人博客
33TXR胜于蓝|优秀个人博客
34TXR胜于蓝|优秀个人博客
35TXR胜于蓝|优秀个人博客
36TXR胜于蓝|优秀个人博客
37TXR胜于蓝|优秀个人博客
38TXR胜于蓝|优秀个人博客
39TXR胜于蓝|优秀个人博客
40TXR胜于蓝|优秀个人博客
41TXR胜于蓝|优秀个人博客
42TXR胜于蓝|优秀个人博客
43TXR胜于蓝|优秀个人博客
44TXR胜于蓝|优秀个人博客
45TXR胜于蓝|优秀个人博客
46TXR胜于蓝|优秀个人博客
47TXR胜于蓝|优秀个人博客
48TXR胜于蓝|优秀个人博客
49TXR胜于蓝|优秀个人博客
50TXR胜于蓝|优秀个人博客
51TXR胜于蓝|优秀个人博客
52TXR胜于蓝|优秀个人博客
53TXR胜于蓝|优秀个人博客
54TXR胜于蓝|优秀个人博客
55TXR胜于蓝|优秀个人博客
56TXR胜于蓝|优秀个人博客
57TXR胜于蓝|优秀个人博客
58TXR胜于蓝|优秀个人博客
59TXR胜于蓝|优秀个人博客
60TXR胜于蓝|优秀个人博客
61TXR胜于蓝|优秀个人博客
62
;( function( window ) {TXR胜于蓝|优秀个人博客
     TXR胜于蓝|优秀个人博客
    'use strict';TXR胜于蓝|优秀个人博客
 TXR胜于蓝|优秀个人博客
    function extend( a, b ) {TXR胜于蓝|优秀个人博客
        forvar key in b ) {TXR胜于蓝|优秀个人博客
            if( b.hasOwnProperty( key ) ) {TXR胜于蓝|优秀个人博客
                a[key] = b[key];TXR胜于蓝|优秀个人博客
            }TXR胜于蓝|优秀个人博客
        }TXR胜于蓝|优秀个人博客
        return a;TXR胜于蓝|优秀个人博客
    }TXR胜于蓝|优秀个人博客
 TXR胜于蓝|优秀个人博客
    function CBPFWTabs( el, options ) {TXR胜于蓝|优秀个人博客
        this.el = el;TXR胜于蓝|优秀个人博客
        this.options = extend( {}, this.options );TXR胜于蓝|优秀个人博客
        extend( this.options, options );TXR胜于蓝|优秀个人博客
        this._init();TXR胜于蓝|优秀个人博客
    }TXR胜于蓝|优秀个人博客
 TXR胜于蓝|优秀个人博客
    CBPFWTabs.prototype.options = {TXR胜于蓝|优秀个人博客
        start : 0TXR胜于蓝|优秀个人博客
    };TXR胜于蓝|优秀个人博客
 TXR胜于蓝|优秀个人博客
    CBPFWTabs.prototype._init = function() {TXR胜于蓝|优秀个人博客
        // tabs elemesTXR胜于蓝|优秀个人博客
        this.tabs = [].slice.call( this.el.querySelectorAll( 'nav > ul > li' ) );TXR胜于蓝|优秀个人博客
        // content itemsTXR胜于蓝|优秀个人博客
        this.items = [].slice.call( this.el.querySelectorAll( '.content > section' ) );TXR胜于蓝|优秀个人博客
        // current indexTXR胜于蓝|优秀个人博客
        this.current = -1;TXR胜于蓝|优秀个人博客
        // show current content itemTXR胜于蓝|优秀个人博客
        this._show();TXR胜于蓝|优秀个人博客
        // init eventsTXR胜于蓝|优秀个人博客
        this._initEvents();TXR胜于蓝|优秀个人博客
    };TXR胜于蓝|优秀个人博客
 TXR胜于蓝|优秀个人博客
    CBPFWTabs.prototype._initEvents = function() {TXR胜于蓝|优秀个人博客
        var self = this;TXR胜于蓝|优秀个人博客
        this.tabs.forEach( function( tab, idx ) {TXR胜于蓝|优秀个人博客
            tab.addEventListener( 'click'function( ev ) {TXR胜于蓝|优秀个人博客
                ev.preventDefault();TXR胜于蓝|优秀个人博客
                self._show( idx );TXR胜于蓝|优秀个人博客
            } );TXR胜于蓝|优秀个人博客
        } );TXR胜于蓝|优秀个人博客
    };TXR胜于蓝|优秀个人博客
 TXR胜于蓝|优秀个人博客
    CBPFWTabs.prototype._show = function( idx ) {TXR胜于蓝|优秀个人博客
        ifthis.current >= 0 ) {TXR胜于蓝|优秀个人博客
            this.tabs[ this.current ].className = '';TXR胜于蓝|优秀个人博客
            this.items[ this.current ].className = '';TXR胜于蓝|优秀个人博客
        }TXR胜于蓝|优秀个人博客
        // change currentTXR胜于蓝|优秀个人博客
        this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0;TXR胜于蓝|优秀个人博客
        this.tabs[ this.current ].className = 'tab-current';TXR胜于蓝|优秀个人博客
        this.items[ this.current ].className = 'content-current';TXR胜于蓝|优秀个人博客
    };TXR胜于蓝|优秀个人博客
 TXR胜于蓝|优秀个人博客
    // add to global namespaceTXR胜于蓝|优秀个人博客
    window.CBPFWTabs = CBPFWTabs;TXR胜于蓝|优秀个人博客
 TXR胜于蓝|优秀个人博客
})( window );

Tags:

很赞哦! ()

文章评论

当前时间

合作加盟

  • 快钱POSS机
  • 费率:0.038%(刷1万=38元手续费)
  • 单笔最高刷卡金额:5万
  • 单月最高刷卡金额:600万

快钱代理公告

  • 凡事扫码代理必须实名认证
  • 实名认证后才可拉进代理微信群
  • 代理微信群有相关活动政策等

站点信息

  • 建站时间:2018-10-24
  • 网站程序:帝国CMS7.5
  • 主题模板《今夕何夕》
  • 文章统计1638篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们

X客服在线

关于

服务时间

周一至周日 9:00-22:00