各类选项卡

时间  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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程