React练习 13：02_07_简易选项卡

在线效果浏览：

需求：mouseover 标签时，自动切换内容

解析：设定一个boolean值，用于切换类的添加/删除，来显示/隐藏对应内容

import React,{useState} from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Simplecard(props){
    const [lessons,setLesson]=useState(props.lessons);
    const handleOver=function(index){
        var newlessons=[...lessons];
        for(var i=0;ifalse;
        newlessons[index].isActive=true;
        setLesson(newlessons);
    }
    return(
        

            

                {lessons.map((lesson,index)=>
                
}
                onMouseOver={()=>handleOver(index)}>
                    {lesson.name}
                
                )}
            
            

                {lessons.map((lesson,index)=>
                

                    {lesson.content.map((content)=>
                    

                        {content}
                    
                    )}
                
                )}
            
        
    )
}

const lessons=[
    {
        name:'第一课',
        content:[
        '网页特效原理分析',
        '响应用户操作',
        '提示框效果',
        '事件驱动',
        '元素属性操作',
        '动手编写第一个JS特效',
        '引入函数',
        '网页换肤效果',
        '展开/收缩播放列表效果'
        ],
        isActive:true
      },
      {
        name:'第二课',
        content:[
        '改变网页背景颜色',
        '函数传参',
        '高重用性函数的编写',
        '126邮箱全选效果',
        '循环及遍历操作',
        '调试器的简单使用',
        '典型循环的构成',
        'for循环配合if判断',
        'className的使用',
        'innerHTML的使用',
        '戛纳印象效果',
        '数组',
        '字符串连接'
        ],
        isActive:false
      },
      {
        name:'第三课',
        content:[
        'JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源',
        'JavaScript出现的位置、优缺点',
        '变量、类型、typeof、数据类型转换、变量作用域',
        '闭包：什么是闭包、简单应用、闭包缺点',
        '运算符：算术、赋值、关系、逻辑、其他运算符',
        '程序流程控制：判断、循环、跳出',
        '命名规范：命名规范及必要性、匈牙利命名法',
        '函数详解：函数构成、调用、事件、传参数、可变参、返回值',
        '定时器的使用：setInterval、setTimeout',
        '定时器应用：站长站导航效果',
        '定时器应用：自动播放的选项卡',
        '定时器应用：数码时钟',
        '程序调试方法'
        ],
        isActive:false
      }
];



ReactDOM.render(
    ,
    document.getElementById('root')
)