Question

我正在尝试从bootstrap添加数据切换药丸。但似乎它甚至找不到id。

这是我的榜样。只有Example1可见，丸子没有切换到Example2。

import React, {Component} from 'react';

class  extends Component {
    render() {
        return (
            <div>
                <div className="nav-tabs">
                    <ul className="nav nav-pills">
                        <li className="active"><a data-toggle="pill" href="#example1">Example1</a></li>
                        <li><a data-toggle="pill" href="#example2">Example2</a></li>
                    </ul>
                    <div className="tab-content">
                        <div id="example1" className="example tab-pane fade in active">
                            <p className="text16">Someting</p>
                        </div>
                        <div id="example2" className="otherexample tab-pane fade">
                            <p className="text16">Someting2</p>
                        </div>
                    </div>
            </div>
        );
    }
}

Answer 1

我在这段代码中没有看到任何重大错误。应对反应-DOM bootstrap css bootstrap js jQuery的
确保你有这些库并按正确的顺序放置脚本，可以编辑你发布并添加脚本。

<ul className="nav nav-pills">
    <li className="active"><a data-toggle="pill" href="#example1">Example1</a></li>
    <li><a data-toggle="pill" href="##example2">Example2</a></li>
</ul>

<div className="tab-content">
   <div id="example1" className="tab-pane fade in active">
     <h3>Example1</h3>
       <p>Some content.</p>
</div>

    <div id="example2" className="tab-pane fade">
       <h3>Example2</h3>
          <p>Some content in menu 1.</p>
    </div>
  </div>
</div>

Bootstrap切换药丸不能在reactjs中工作

1 个答案: