使用CSS和Javascript制作选项卡是可行的

我已经试着让这个片段在某种程度上起作用。我刚刚开始用这个，我目前只为我的手机设计了它。您可以通过单击“项目”和“今天”来查看问题

我有一个div（

#data container

），它由两个div（

.project，.today

）组成，我希望这两个div并排运行，就像制表符一样。所以，当我点击他们各自的按钮时，它会滑动并显示相应的div。我已经让它工作了，但有两个问题

它们如何工作-

#数据容器

有

空白：nowrap

（子div不会并排缠绕和停留，滑动将工作）并且它的子div（

.project and.today

）设置为

宽度：100%

和

内联块

这方面的问题

数据容器

需要能够垂直滚动，并且可以将文本环绕当前选定的div，但是

空白：nowrap

会使文本溢出。我试过

wordwrap:break-word

，它不起作用。我还可以通过设置

显示：hidden

使其工作，但我希望div可以滑动

我不明白为什么会发生这个问题。当我将

#数据容器

设置为

overflow-y:scroll

时，它会使divs水平滚动，从而破坏整个系统

我需要一种方法使

数据容器

只能垂直滚动并包装文本

翡翠

extends ./layout.jade

block content
    #maindiv
        .sidebar
            #profile
                img(src= ' #{image} ', width=40, height=40)
                span #{name}
            ul
                li Home
                li +Project
                li +Task
                li Reminders
                li Statistics
                li Settings
                li Help
                li
                    a(href='/logout') Log Out
        header
            span ☰
            h1 LifeHub
        .container
            .navbar
                .navbar-inside-one.below
                    h2 Projects
                .navbar-inside-two.above
                    h2 Today
            #data-container
                .project
                    p It's lonely here. You should add some projects.
                .today
                    input#task(type='text', placeholder='+ Add a New Task', autocomplete='off')

.project p {
   white-space: normal;
}

CSS

.container {
  position: relative; }

.below {
  z-index: 0;
  box-shadow: 0;
  background-color: white;
  color: black; }

.above {
  z-index: 1;
  box-shadow: 2px 2px 2px 1px #b0b0b0;
  background-color: #26A69A;
  color: white; }

#data-container {
  position: relative;
  height: 93%;
  overflow-y: scroll;
  white-space: nowrap;
  width: 100%;
  z-index: 0; }

.navbar {
  text-align: center;
  font-size: 26px;
  height: 7%;
  min-height: 50px; }

.navbar-inside-one, .navbar-inside-two {
  position: relative;
  display: inline-block;
  width: 50%;
  height: 100%;
  padding: 10px 10px 10px 10px; }

.project, .today {
  display: inline-block;
  position: relative;
  width: 100%;
  word-wrap: break-all;
  font-size: 28px;
  line-height: 1.63em; }

使用Javascript制作动画

    $('.navbar-inside-two').click(function() {
        $(".project, .today").animate({left: "-" + $("#data-container").width()}, 200);
        $(".navbar-inside-one").removeClass('below').addClass('above');
        $(this).removeClass('above').addClass('below');
    });

    $('.navbar-inside-one').click(function() {
        $(".project, .today").animate({left: "0"}, 200);
        $(".navbar-inside-two").removeClass('below').addClass('above');
        $(this).removeClass('above').addClass('below');
    });

$（文档）.ready（函数（）{
//容器和侧栏的高度函数
（功能（）{
$（“.container，.sidebar”）.height（$（“#maindiv”）.height（）-$（'header'）.height（））；
$（“.sidebar”）.css（'top'，49）；//再次生成
})();
$（'span'）。单击（函数（）{
var sidebar=$（'.sidebar'）.css（'left'）.replace（/（[a-z]）\w+/g'）；
如果（侧边栏<0）{
$（'.sidebar'）。设置动画({
“左”：“0px”
}, 200);
$（'.container'）。设置动画({
“左”：“150px”
}, 200)
}否则{
$（'.sidebar'）。设置动画({
'左'：'-150px'
}, 200);
$（'.container'）。设置动画({
“左”：“0px”
}, 200)
}
});
$（'.navbar在两个中间'）。单击（函数（）{
$（“.project，.today”）.animate({
左：“-”+$（“#数据容器”）.width（）
}, 200);
$（“.navbar在其中”）.removeClass（'bellow'）.addClass（'bellow'）；
$（this）.removeClass（'before'）.addClass（'before'）；
});
$（'.navbar在一个内'）。单击（函数（）{
$（“.project，.today”）.animate({
左：“0”
}, 200);
$（“.navbar在两个中”）.removeClass（'bellow'）.addClass（'bellow'）；
$（this）.removeClass（'before'）.addClass（'before'）；
});
});
/*从多个Sass文件中搞乱了Css*/
.字体头，
纳瓦尔先生，
.侧边栏{
字体系列：“Poiret One”，草书；
字号：100；
字母间距：2.2px；
}
.font第，
输入[type='text']{
字体系列：“源Sans-Pro”，无衬线；
字号：100；
字母间距：1.4px；
}
* {
框大小：边框框；
-webkit字体平滑：抗锯齿；
字体系列：“源Sans-Pro”，无衬线；
}
html，
身体，
分区，
跨度
小程序，
对象
iframe，
h1，
h2，
h3，
h4，
h5，
h6，
P
块引用，
之前，
A.
缩写，
缩略语
地址:，
大的
引用，
代码，
德尔，
dfn，
相对长度单位，
img，
ins，
kbd，
Q
s
桑普，
小的
罢工
坚强的
附属的，
啜饮，
tt，
var，
B
U
我
居中
dl，
dt，
dd，
ol,，
ul，
锂，
字段集，
形式，
标签，
传奇
桌子
说明文字
t身体，
特富特，
thead，
tr，
th，
运输署，
文章
在一边
帆布，
细节，
嵌入
图形
figcaption，
页脚，
标题，
hgroup，
菜单，
导航，
产出，
红宝石，
第节，
总结，
时间
做记号
音频
录像带{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
}
/*旧浏览器的HTML5显示角色重置*/
文章
在一边
细节，
figcaption，
图形
页脚，
标题，
hgroup，
菜单，
导航，
部分{
显示：块；
}
身体{
线高：1；
}
ol,，
保险商实验室{
列表样式：无；
}
a{
文字装饰：无；
颜色：白色；
}
标题{
宽度：100%；
背景色：#1a70c5；
填充：10px；
}
跨度{
框大小：边框框；
位置：相对位置；
字号：28px；
颜色：#F8；
}
h1{
字体系列：“Poiret One”，草书；
字母间距：2.2px；
左边距：10px；
颜色：白色；
字号：28px；
显示：内联块；
}
.集装箱{
位置：相对位置；
}
.以下{
z指数：0；
盒影：0；
背景色：白色；
颜色：黑色；
}
.以上{
z指数：1；
盒影：2PX2PX2PX1PX#B0B0；
背景色：#26A69A；
颜色：白色；
}
#数据容器{
位置：相对位置；
身高：93%；
溢出y：滚动；
空白：nowrap；
宽度：100%；
z指数：0；
}
navbar先生{
文本对齐：居中；
字号：26px；
身高：7%；
最小高度：50px；
}
.导航栏在一个内，
.导航条在两个以内{
位置：相对位置；
显示：内联块；
宽度：46%；
身高：100%；
填充：10px 10px 10px 10px；
}
项目
.今天{
显示：内联块；
位置：相对位置；
宽度：100%；
单词包装：打破所有；
字体大小：24px；
线高：1.63em；
填充：20px
}
输入[type='text']{
位置：静态；
边界：无；
背景：透明；
字体大小：16px；
线高：16px；
宽度：100%；
高度：30px；
颜色：黑色；
}
输入[type='text']：焦点{
大纲：无；
边界：无；
}
：-webkit输入占位符{
颜色：#D9D9D9；
}
：-webkit滚动条{
显示：无；
}
#maindiv{
宽度：400px；
高度：550px；
位置：绝对位置；
最高：30%；
左：50%；
-webkit转换：translateX（-50%）translateY（-30%）；
转化：translateX（-50%）translateY（-30%）；
溢出：隐藏；
}
.侧边栏{
位置：固定；
左：-155px；
身高：100%；
底部：0px；
宽度：150px；
背景：#333；
}
.侧边栏{
填充：0px 5px；
}
.侧边栏李{
颜色：#F7F7F7；
字号：100；
字体大小：22px；
文本对齐：居中；
边缘顶部：30px；
}
希德先生
#data-container {
    display: flex;
}

.project, .today {
    display: flex;
    min-width: 100%;
    white-space: normal;
}

word-wrap: break-all;

.project p {
   white-space: normal;
}