小编Swa*_*pna的帖子

在主要包装内,我有5个分区.第一个div包含4个Box(box_1,box_2,box_3,box_4),其中我的点击事件将发生.

主包装内的其他4个div分别是box_1,box_2,box_3,box_4的内容.

当我点击我的第一个框时,click事件应该为第一个div设置动画(向右滑动),box_1 div应该向右滑动.

这是我迄今为止所做的JS小提琴链接.

http://jsfiddle.net/swapnaranjita_nayak/8XcZX/

我只添加了box_1 id以向右滑动.我想为所有人编写通用代码.即如果我点击第二个框,第二个框sd从右边动画,如果我点击第三个框,第三个框应该从左边动画.

当我点击它们时,如何访问4个Div的corressponding内容div.注意:我已将单击事件附加到所有4个div.

*以上问题解决了** 新问题,

我已在每个box_container部分添加回菜单href链接.单击此超链接,将再次带回幻灯片右侧的动画效果返回"菜单"部分.菜单部分将来到窗口和幻灯片动画.

以下代码正常运行.

问题是当我点击任何一个盒子时,会出现相应的盒子容器.当我点击超级链接选项"返回菜单"时,我甚至返回菜单部分.即4盒部分.问题始于此处.如果我再次点击任何一个框,移动到相应的框容器.点击超链接回到后面,菜单即4个盒子部分只是从屏幕上消失.

注意:这次警报会消失两次.

HTML

<div class="main_wrapper" id="main_wrapper">
<div class="container_fluid" id="menu">
    <div class="wrapper">
        <div class="row">
            <div class="box1" id="box_1"></div>
            <div class="box2" id="box_2"></div> <div class="clear"></div>
        </div>

         <div class="row">
            <div class="box3" id="box_3"></div>
            <div class="box4" id="box_4"></div> <div class="clear"></div>
        </div>

    </div>
</div><!---End of Container fluid--->

 <div class="container_fluid" id="box_1_sec" style="display:none;margin-right:-170px;">
     <h1>Box1 Content</h1>
     <a href="#" id="back1">Back to #Menu</a>
</div>
     <div class="container_fluid" id="box_2_sec" style="display:none;margin-right:-170px;">
     <h1>Box2 Content</h1>
      <a href="#" id="back2">Back to #Menu</a>
</div>
 <div class="container_fluid" id="box_3_sec" style="display:none;margin-right:-170px;">
     <h1>Box3 …

我正在使用 react-owl-carousel 包。

https://www.npmjs.com/package/react-owl-carousel

我已按照说明成功实现了代码，并且轮播运行顺利。

问题：目前我同时显示 4 个项目。而在每一个画面中，这4个项目都来了。而不是 4 ，我想为 768px 到 1200px 之间的设备显示 3 个项目，500px 到 767px 之间的 2 个项目和 499px 以下设备的 1 个项目。

owl carousel doc 中有包含“响应式”的选项。但我想知道如何包含它以实现相同的目标。

这是我到目前为止所做的。

import React, { Component } from 'react';
import {Grid, Row, Col , ProgressBar } from 'react-bootstrap';
import UserAvtar from '../common/UserAvtar.js';
import SectionHeaderOfCards  from '../common/SectionHeaderOfCards.js';
import OwlCarousel from 'react-owl-carousel';

const options = {
    items: 4,
};

class DashboardPage extends Component {
  render() {
    return (
      <div>
          <section className="has-small__padding has-grey__bg">
              <UserAvtar /> …

我是React JS的新手。我试图在React中使用猫头鹰轮播。

我从npm安装的软件包链接是

https://www.npmjs.com/package/react-owl-carousel

按照指示，我已在特定页面上导入了Owl Carousel组件。这是代码：

import React, { Component } from 'react';
import {Grid, Row, Col , ProgressBar } from 'react-bootstrap';
import UserAvtar from '../common/UserAvtar.js';
import SectionHeaderOfCards  from '../common/SectionHeaderOfCards.js';
import OwlCarousel from 'react-owl-carousel';

const options = {
    items: 4,
};

class DashboardPage extends Component {
  render() {
    return (
      <div>
          <section className="has-small__padding has-grey__bg">
              <UserAvtar />
          </section>
          <section className="has-small__padding">
              <Grid>
                  <SectionHeaderOfCards title="Recommended Matches" />
                  <OwlCarousel margin={10} >
                      <div class="item"><h4>1</h4></div>
                      <div class="item"><h4>2</h4></div>
                      <div class="item"><h4>3</h4></div>
                      <div class="item"><h4>4</h4></div>
                      <div class="item"><h4>5</h4></div>
                      <div class="item"><h4>6</h4></div>
                  </OwlCarousel> …

我有 5 个这样的列表项，即自我、父母、兄弟姐妹、亲戚、朋友。单击任何项​​目，我正在添加一个名为active-option. 下面是我的代码，我到目前为止所做的。请注意，我是 React JS 的新手。

import React, { Component } from 'react';
import {Grid, Col, Row, Button} from 'react-bootstrap';
import facebook_login_img from '../../assets/common/facebook-social-login.png';

const profilesCreatedBy = ['Self' , 'Parents' , 'Siblings' , 'Relative' , 'Friend'];

class Register extends Component {

  constructor(props) {
    super(props);
    this.state = { addClass: false };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ addClass: !this.state.addClass });
  }

  render() {

    let selectOption = ["option"];
    if (this.state.addClass) {
      selectOption.push("active-option");
    }

    return (
        <section className="get-data__block" style={{padding: …