各類選項卡

時間 2019-12-06

標籤各類選項简体版

原文原文鏈接

下面我給你們介紹幾種選項卡的例子與寫法：javascript

第一種--三目運算選項卡css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body ng-app>
        <div class="wrap" ng-init="now=0">
            <p>
                <span ng-click="now=0" class="{{now==0 ? 'on' : ''}}">娛樂</span>
                <span ng-click="now=1" class="{{now==1 ? 'on' : ''}}">體育</span>
                <span ng-click="now=2" class="{{now==2 ? 'on' : ''}}">影視</span>
            </p>
            <div ng-show="now==0">娛樂</div>
            <div ng-show="now==1">體育</div>
            <div ng-show="now==2">影視</div>
        </div>
        
        <script src="js/angular.min.js"></script>
            
        </script>
    </body>
</html>

第二種--angualr選項卡html

<!DOCTYPE html>
<html ng-app="mk">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body ng-controller="test">
        <div id="box">
            <p>
                <span ng-repeat="item in arr" ng-click = "show($index)">{{item.name}}</span>
            </p>
            <div ng-repeat = "item in arr" ng-show = "now == $index">{{item.content}}</div>
        </div>
        
        <script src="js/angular.min.js"></script>
        <script>
            var app = angular.module("mk",[]);
            app.controller("test",function($scope){
                $scope.now = 0;
                $scope.arr = [
                    {"name":"tab1","content":"content1"},
                    {"name":"tab2","content":"content2"},
                    {"name":"tab3","content":"content3"}
                ]
                
                $scope.show = function(n){
                    $scope.now = n;
                }
            })
        </script>
    </body>
</html>

第三種--angular路由選項卡java

<!DOCTYPE html>
<html ng-app="mk">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
            <ul>
                <li><a href="#/index">首頁</a></li>
                <li><a href="#/news">新聞</a></li>
            </ul>
            <div ng-view></div>
            <script type="text/ng-template" id="nav">
                <ul>
                    <li>這是首頁內容</li>
                </ul>
            </script>
            <script type="text/ng-template" id="news">
                <ul>
                    <li>這是新聞內容</li>
                </ul>
            </script>
            
            
        
        <script src="js/angular.min.js"></script>
        <script src="js/angular-route.js"></script>
        
        <script type="text/javascript">
            var app = angular.module("mk",['ngRoute']);
                app.config(function($routeProvider){
                    $routeProvider.when('/index',{
                        templateUrl:'nav'
                    }).when('/news',{
                        templateUrl:'news'
                    }).otherwise({
                //默認顯示哪一個頁面
                        redirectTo:"index"
                    });
                });
            
            
        </script>
    </body>
</html>

第四種--jQ選項卡jquery

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            #box {
                width: 300px;
                height: 300px;
                border: 1px solid #000;
                margin: 50px auto;
            }
            
            #box p {
                width: 300px;
                border-bottom: 1px solid #000000;
                height: 30px;
                display: flex;
                line-height: 30px;
            }
            
            #box p span {
                width: 100px;
                text-align: center;
                border: 1px solid red;
            }
            
            #box .x {
                text-align: center;
                line-height: 200px;
                display: none;
            }
        </style>
    </head>

    <body>
        <div id="box">
            <p>
                <span class="dd" style="background: red;color: white;">1111</span>
                <span class="dd">2222</span>
                <span class="dd">3333</span>
            </p>
            <div>
                <div class="x" style="display: block;">index1</div>
                <div class="x">index2</div>
                <div class="x">index3</div>
            </div>
        </div>
        <script src="js/cookie.js"></script>
        <script src="js/jquery-3.1.1.js"></script>

        <script type="text/javascript">
            window.onload = function() {
                $(".x").eq(getCookie("index")).show().siblings().hide();
                $(".dd").eq(getCookie("index")).css({
                    "background": "red",
                    "color": "white"
                }).siblings().css({
                    "background": "white",
                    "color": "black"
                })
                $(".dd").on("click", function(e) {
                    e.preventDefault();
                    var inde = $(this).index();
                    $(".x").eq(inde).show().siblings().hide();
                    $(".dd").eq(inde).css({
                        "background": "red",
                        "color": "white"
                    }).siblings().css({
                        "background": "white",
                        "color": "black"
                    })
                    setCookie("index", inde, 4);
                });
            }
        </script>
    </body>

</html>

第五種--ui-router路由選項卡cookie

<!DOCTYPE html>
<html ng-app="mk">

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div ui-view></div>

        <script src="angular/angular.min.js"></script>
        <script src="angular/angular-ui-route.js"></script>
        <script type="text/javascript">
            var app = angular.module("mk",["ui.router"]);
            app.config(function($stateProvider, $urlRouterProvider) {
                $urlRouterProvider.when("", "pageTab/tab1");
                $stateProvider.state("pageTab", {
                    url: '/pageTab',
                    templateUrl: 'pageTab.html'
                }).state('pageTab.tab1', {
                    url: "/tab1",
                    templateUrl: 'tab1.html'
                }).state('pageTab.tab2', {
                    url: '/tab2',
                    templateUrl: 'tab2.html'
                }).state('pageTab.tab3', {
                    url: '/tab3',
                    templateUrl: 'tab3.html'
                });
                
                
            });
        </script>
    </body>
</html>

在寫一個html模塊

<div class="footer">
　　<a href="#/tab1" style="padding-right: 20px;" ui-sref=".tab1">tab1</a>
　　<a href="#/tab2" style="padding-right: 20px;" ui-sref=".tab2">tab2</a>
　　<a href="#/tab3" style="padding-right: 20px;" ui-sref=".tab3">tab3</a>
　　<div ui-view></div>
</div>app

以上的就是五種選項卡的寫法，但願對你們有所幫助！ide

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。