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;i<newlessons.length;i++) newlessons[i].isActive=false;
        newlessons[index].isActive=true;
        setLesson(newlessons);
    }
    return(
        <div id="outer">
            <ul id="tab">
                {lessons.map((lesson,index)=>
                <li key={lesson.name} className={lesson.isActive ? 'current' : ''}
                onMouseOver={()=>handleOver(index)}>
                    {lesson.name}
                </li>
                )}
            </ul>
            <div id="content">
                {lessons.map((lesson,index)=>
                <ul key={index} className={lesson.isActive ? 'current' : ''}>
                    {lesson.content.map((content)=>
                    <li key={content}>
                        {content}
                    </li>
                    )}
                </ul>
                )}
            </div>
        </div>
    )
}

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(
    <Simplecard lessons={lessons}/>,
    document.getElementById('root')
)