关于切换效果的一些理解与常见例子

前提引用JQ或者Zepto.js,大神可以用原生js[/color]

核心理解:默认状态设置,选择状态设置,触发后清空同类的选择状态,获取到的对象添加选择状态

[color=#ff0000]####1.tab切换框

关于切换效果的一些理解与常见例子

关于切换效果的一些理解与常见例子

css样式:
<style>
.ul1{padding: 0;margin: 0;overflow: auto;}

        定义一个初始样式
        .ul1 li{
            list-style: none;
            width: 32%;
            float: left;
            margin-right: 2%;
            background-color: #CCCCCC;
            color: white;
            text-align: center;
            height: 30px;
            line-height: 30px;                                                  
        }

        在ul1 li为3的整数倍的li margin-right为0,因为每个li宽32%,(32%+2%)+(32%+2%)+32%=100%
        .ul1 li:nth-of-type(3n){margin-right: 0;}           

        定义一个选中状态的样式          
        .ul1 li.act{background-color: #CD0A0A;}                                             
    </style>

html代码:
<ul class="ul1">
<li class="act">栏目1</li>
<li>栏目2</li>
<li>栏目3</li>
</ul>

JavaScript代码:
<script>

        $('.ul1 li').click(function(){

            $('.ul1 li').removeClass('act');//清除ul1 li集合里的act类
            $(this).addClass('act');//当前点击获取到的对象添加act类

        })

    </script>

==============================================================================================================================================

再加上切换内容[/color]

关于切换效果的一些理解与常见例子

关于切换效果的一些理解与常见例子

[color=#ff0000]补充的modal类样式

css样式

<style>
.modal{

            display: none;//开始状态是隐藏的
            border: 1px solid #CC2222;
            margin-top: 10px;
        }

        .modal.act{

            display: block;//选择状态是显示
        }

    </style>

html代码:

    <ul class="ul1">
        <li class="act" data-type = "#mod01">栏目1</li>//用data-type属性存储对应内容.modal的id值
        <li data-type = "#mod02">栏目2</li>
        <li data-type = "#mod03">栏目3</li>
    </ul>

    <div class="modal act" id="mod01">
        内容1
    </div>
    <div class="modal" id="mod02">
        内容2
    </div>
    <div class="modal" id="mod03">
        内容3
    </div>

JavaScript代码

    <script>

        $('.ul1 li').click(function(){

            $('.ul1 li').removeClass('act');//清除.ul1 li集合里的act类
            $(this).addClass('act');//当前点击获取到的对象添加act类

            var id=$(this).attr('data-type');//获取当前对象的data-type值,attr方法,attr('属性名')是获取该属性的值,attr('属性名','值'),则是给当前属性赋值。

            $('.modal').removeClass('act');//清除.modal集合里的act类
            $(id).addClass('act');//对应id的.modal添加act类

        })

    </script>

==============================================================================================================================================================

同理的其他常见例子[/color]

3.单选按钮的切换实现(只是其中的一种表现形式)

关于切换效果的一些理解与常见例子

关于切换效果的一些理解与常见例子

    <style>

        .radio_div{

            background-image: url(images/hdcheck_no.png);[color=#ff0000]//背景图片,就是上图的圈,要求跟下面选择状态的图片规格一样
            background-position: 95% 50%;//背景定位,第一个参数代表的是从左到右的背景图位置,0为容器的最左边,100%为容器的最右边;第二个参数代表的是从上到下的背景图位置,0为容器的最上部,100%为容器的最底部。
            background-repeat: no-repeat;//背景图片不重复
            background-size: auto 100%;//背景图片的大小,第一个是背景图的宽度,第二个是背景图的高度,都是相对于容器的值,现在是宽度跟100%的高自适应。
            padding: 10px;
        }

        .radio_div.act{

            background-image: url(images/hdcheck_yes.png);//选中后的背景

        }

    </style>

    <div class="radio_div act">         
        我是选项1
    </div>
    <div class="radio_div">         
        我是选项2
    </div>

javascript代码

    <script>

        $('.radio_div').click(function(){

            $('.radio_div').removeClass('act');
            $(this).addClass('act');

        })

    </script>

##设置默认状态,设置选择状态,清了所有同类的选择状态,当前对象加上选择状态

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复