html - 使用 ReactJS 在单击时切换 div

Question

我遇到了一个问题，即在单击某种切换栏或其他东西上的书面文本时切换 div。

基本上，我正在使用 React JS 重新创建一个 WordPress 网站模板。该模板最初建立在引导程序上。这是模板。

因此，我使用简单的 HTML 和 CSS 完成了所有部分，并使用 reacts 类方法渲染了这些部分（但我计划将它们更改为功能，因为我不处理状态）。我以这种方式完成了所有部分，但现在我在这里有一个部分（获取到活动大厅部分的方向，倒数第二部分），它有一种导航栏，可以动画和切换表示的数据，还可以更改活动标题它下面有一个小指针。我还附上它的图片：

目前，默认情况下它在Venue，但是在单击Time或How to get there中的任何一个时，它会切换它们下方的粉红色指针并相应地更改其大小，并且当单击其中任何一个时，它会动画并切换下面的东西它（至少这是它应该做的，他们在所有三个中添加了相同的文本）。

如何实现所有这些切换并保留当前活动的标题？这是我专门针对这部分的代码：

import React,{Component} from 'react'

class Directions extends Component{
    render(){
        return(
            <section id = "Directions-section">
                <div id = "directions-div">
                    <div id="directions-text">
                        <div id ="d-img">
                            <img style={{position:"relative",top:"60px"}} src="http://demo.themewinter.com/html/exhibz/images/shap/Direction_memphis3.png" 
                            alt=''/>
                        </div>
                        <div id="d-t">
                            <div id="htgt">
                                <h1>
                                    <span>REACH US</span>
                                    Get Direction to the <br />Event Hall<br/>
                                    <img src="http://demo.themewinter.com/html/exhibz/images/shap/title.png"
                                    alt=''/>
                                </h1>
                            </div>
                            <div id="toggle">
                                <div id="toggle-header">
                                    <ul>
                                        <li className="active">Venue</li>
                                        <li>Time</li>
                                        <li>How to get there</li>
                                    </ul>
                                </div>
                                <div id="toggle-address">
                                    <h2>
                                        Brighton Waterfront Hotel, Brighton, London
                                        <span>
                                        1Hd- 50, 010 Avenue, NY 90001<br/>
                                        United States
                                        </span>
                                    </h2>
                                </div>
                                <div id="toggle-info">
                                    <div id="tickets-info">
                                        <h2>Tickets info</h2>
                                        <h2>Name: <span>Ronaldo König</span></h2>
                                        <h2>Phone: <span>009-215-5595</span></h2>
                                        <h2>Email: <span>[e-mail]</span></h2>
                                    </div>
                                    <div id="programme-Details">
                                        <h2>Programme Details</h2>
                                        <h2>Name: <span>Ronaldo König</span></h2>
                                        <h2>Phone: <span>009-215-5595</span></h2>
                                        <h2>Email: <span>[e-mail]</span></h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
              </section>
         )
        }

这只是其中一个 div 的代码，我计划将其复制 3 次，每个标题复制一次，并应用您建议的方法。

用于此的 CSS：

#Directions-section
{
    position: relative;
    top:320px;
    width:100%;
    height:600px;
}

#directions-div
{
    position: absolute;
    top:0px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}

#directions-text
{
    flex:1;
    display: flex;
    flex-direction: row;
}

#d-img{flex: 1;}

#d-t
{
    flex:5;
    width:100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

#htgt
{
    flex: 1;
    width: 100%;
}

#htgt h1
{
    font-size: 36px;
    font-weight: 800;
    color: #3b1d82;
    font-family: 'Raleway', sans-serif;
    line-height: 1.2;
}

#htgt span
{
    display: block;
    font-size: 14px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    color: #888888;;
}

#toggle
{
    flex:2;
    width: 100%;
    display: flex;
    flex-direction: column;
}

#toggle-header
{
    flex: 1;
    width: 100%;
}

#toggle-header ul li
{
    display: inline-block;
    list-style: none;
    margin-right:50px;
    color: #888888;
    font-family: 'Roboto',sans-serif;
    font-size: 16px;
    font-weight: 700;
    border-bottom: 2px solid #cccaca;
}

#toggle-header li:visited
{
    color: #e7015e;
    border-color: #e7015e;
}

#toggle-header li .active
{
    color: #e7015e;
    border-color: #e7015e;
    cursor: pointer;
}

#toggle-address
{
    flex:1;
    width:100%;
}

#toggle-address h2
{
    font-size: 20px;
    color: #1c1c24;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

#toggle-address span
{
    display: block;
    font-size: 16px;
    color: #888888;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
}

#toggle-info
{
    flex:3;
    width: 100%;
    display: flex;
    flex-direction: row;
}

#tickets-info
{
    flex: 1;
    width: 100%;
}

#tickets-info h2
{
    font-family: 'Roboto',sans-serif;
    font-size: 16px;
    color: #222222;
}

#tickets-info span
{
    color: #888888;
}

#programme-Details
{
    flex: 1;
    width: 100%;
}

#programme-Details h2
{
    font-family: 'Roboto',sans-serif;
    font-size: 16px;
    color: #222222;
}

#programme-Details span
{
    color: #888888;
}

PS：我没有加入Bootstrap，因为一个小误会，后期加入的时候，把一个月的辛苦搞砸了！

编辑：我还需要在点击不同的标题时更改下面的文本并添加显示文本更改的动画。

标签： htmlcssreactjs

Answer 1

尝试用你的切换这个 ul

 <ul>
            {["Venue","Time","How to get there"].map((e,i) => 
            <li onClick={() => this.setState({selected: i})} 
          className={this.state.selected === i ?"active":null}>{e}</li>)}
         </ul>

和

render()在方法上方添加这个

state = { 
        selected:0
     }