简单的选项卡（jq/angular）

最新推荐文章于 2021-11-12 15:03:09 发布

han_hanker

最新推荐文章于 2021-11-12 15:03:09 发布

阅读量341

点赞数

分类专栏： javascript jquery angularjs

本文链接：https://blog.csdn.net/u012258564/article/details/67096741

版权

javascript 同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

jquery

20 篇文章 0 订阅

订阅专栏

angularjs

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <script type="text/javascript" src="jq/jquery-1.11.3.min.js"></script> -->
    <script type="text/javascript" src="angular/angular-1.5.0.min.js"></script>
    <style type="text/css">
        *{margin:0; padding:0;}
        .item{
            font-size: 30px;
            padding: 0 10px;
        }
        .content1{
            height: 200px;
            width: 300px;
            text-align: center;
            line-height: 200px;
            display: none;
            font-size: 30px;
            background: #ccc;
        }
        .bg{
            background: #eee;
        }
        .show{
            display: block;
        }
    </style>
</head>
<body ng-app="app">
    <div ng-controller="DemoController">


        <span class="item" ng-repeat="item in items" ng-click="show($index)" ng-class="{bg: $index == start }">{{item}}</span>
        <div>
            <div class="content1" ng-repeat="content in contents" ng-class="{show: $index == start}">
                {{content}}
            </div>          
        </div>

    </div>
</body>
</html>
<!--选项卡1-->
<script type="text/javascript">
    var module = angular.module('app', []);
    module.controller('DemoController' ,['$scope', function($scope){
        $scope.start = 0;
        $scope.contents = ['content1', 'content2', 'content3', 'content4', 'content5'];
        $scope.items = ['item1', 'item2', 'item3', 'item4', 'item5'];
        $scope.show = function(index){
            $scope.start = index;
        }
    }]);
</script>
<!-- <script type="text/javascript">
    //选项卡2
    // 比较简单清晰的写法
    // $(function(){
    //  $('.item').click(function(){
    //      $(this).addClass('bg').siblings().removeClass('bg');
    //      var index = $(this).index();
    //      $('.content1').eq(index).show().siblings().hide();
    //  });
    //  $('.item').eq(0).trigger('click');
    // });
    // 
    // 选项卡3
    // 智商不够用
    $('.item').each(function(i){
        var b = function(i){
            var index = i;
            var a = function(){
                var content = $('.content1').eq(index);
                content.show().siblings().hide();
                $(this).addClass('bg').siblings().removeClass('bg')
            }
            return a;
        }(i);

        $(this).click(b);
    });
</script> -->

han_hanker

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的选项卡（jq/angular）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>  <script type="text
复制链接

扫一扫