Question

编辑：问题：如何正确使用.slide（）适用于多个div。

我的页面包含一个导航栏（在一个div中），后跟另一个作为容器的div，在这个容器div我有5个其他div（标有col-2到col-6的id，用于保存内容。

我想在点击导航栏中的相应链接时将这些col-2到col-6 div滑入视图。不希望代码为我做这个只是询问如何做，例子，链接到其他类似的东西的JSfiddles（滑动div到另一个div的中心）

没有查找fadeOut或fadeIn代码，也没有查找从点击的链接向下滑动的代码。

当点击链接时，我希望相应的内容div从左侧或右侧滑入，当点击另一个链接时，当前div滑出并且新div滑入。（非常直接）只需要方向甚至是代码编写中的内容，我不需要有人花时间为我做工作，只需要帮助搞清楚要做什么......

我需要链接jquery UI吗？什么是正确的链接方式因为我无法从goodle获取UI链接在我的页面上工作。

我附上的小提琴只是我正在使用的代码的一个想法。 id更喜欢链接到其他来源，显示如何正确使用.slide（），特别是多个div

  <div class="nav-bar">
    <ul>

      <li><a class="nav1" id="col-2" href="#col-2">HOME</a></li>

      <li><a class="nav1" ide="col-3" href="#col-3">ABOUT</a></li>

      <li><a class="nav1" id="col-4" href="#col-4">PUBLISHED</a></li>

      <li><a class="nav1" id="col-5" href="#col-5">PROJECTS</a></li>

      <li><a class="nav1" id="col-6" href="#col-6">CONTACT</a></li>

    </ul>
  </div>
  <div class="container">
    <div class="menu-content col2" id="col2">
      <h1>Author of "wall of tears" series</h1>
      <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
        tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
        porttitor, facilisis luctus, metus</p>

    </div>
    <!-- end col2-->




    <div class="menu-content col3" id="col3">
      <img class="bio" src="_imgs/walloftears.jpg" />
    </div>
    <!-- end  col3-->

    <div class="menu-content col4" id="col4">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <!-- end  col4-->


    <div class="menu-content col5" id="col5">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <!-- end  col5-->


    <div class="menu-content col6" id="col6">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <!-- end  col6-->

  </div>
  <!-- end container-->

https://jsfiddle.net/Pinky_M/rp8gudhr/4/

为朋友创建网页，问题是我尽可能多地搜索和试验。我是javascript / jquery的新手，我可以阅读它（一旦编写所有代码），但我自己编写它有困难。想要点击导航栏中的其中一个链接时，相应的菜单内容div从右侧或左侧滑入容器div，当点击下一个链接时，通过滑动它移除前一个div，因为新的幻灯片滑动in（或者新的幻灯片在另一个滑出之后滑入。我发现了无数的教程和其他使用这种技术的项目，但是对于我的生活来说，我无法让它工作。现在对它感到沮丧。我我还在为JavaScript编写简单的代码，尽管我对jQuery有点好处，并且更愿意使用它。

链接到我用我正在使用的所有HTML和CSS制作的小提琴，jQuery被链接虽然jQuery UI不像我似乎不喜欢链接。提前感谢您的帮助

Answer 1

我认为你应该投资＆＃34; Bootstrap＆＃34; 来让你的生活更轻松。
试试这个：

<body>

<div class="container">
  <h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

</body>

在此处查看 JSFiddle ：https://jsfiddle.net/rn3ows58/

使用导航链接（列表）将右侧或左侧菜单内容div滑入容器div？

1 个答案: