Создание вкладок с помощью CSS и Javascript

Я попытался сделать фрагмент работы несколько. Я только начинаю с этого, и я только сейчас его разработал для своего телефона. Вы можете увидеть проблему, щелкнув по проектам и сегодня.

У меня есть div (#data-container), который состоит из двух div (.project, .today), и я хочу, чтобы эти два divs были бок о бок, действуя как вкладки. Таким образом, когда я нажимаю на соответствующую кнопку, она просматривает и показывает соответствующий div. У меня есть работа, но с двумя проблемами.

Как они работают. #data-container имеет white-space: nowrap (дочерние divs не будут обертываться и оставаться бок о бок, а скользящее будет работать), а дочерние div (.project and .today) - установите значение width: 100% и inline-block.

Проблемы с этим

  • data-container должен иметь возможность прокручивать по вертикали и обертывать текст вокруг текущего выделенного div, но white-space: nowrap делает переполнение текста. Я пробовал word-wrap: break-word, он не работает. Я также могу заставить его работать, установив display: hidden, но я хочу, чтобы divs пронеслись.

  • Я не понимаю, почему эта проблема происходит. Когда я устанавливаю значение #data-container в overflow-y: scroll, он делает возможности divs горизонтально прокрутки, которая разбивает всю систему.

Мне нужен способ сделать data-container только вертикальную прокрутку и обернуть текст.

Jade

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 lonely here. You should add some projects.
                .today
                    input#task(type='text', placeholder='+ Add a New Task', autocomplete='off')

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');
    });


$(document).ready(function() {

  //Height function for container and sidebar
  (function() {
    $(".container, .sidebar").height($("#maindiv").height() - $('header').height());
    $(".sidebar").css('top', 49); //TO BE MADE AGAIN
  })();

  $('span').click(function() {
    var sidebar = $('.sidebar').css('left').replace(/([a-z])\w+/g, '');
    if (sidebar < 0) {
      $('.sidebar').animate({
        'left': '0px'
      }, 200);
      $('.container').animate({
        'left': '150px'
      }, 200)
    } else {
      $('.sidebar').animate({
        'left': '-150px'
      }, 200);
      $('.container').animate({
        'left': '0px'
      }, 200)
    }
  });

  $('.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');
  });
});
/* Messed up Css from multiple Sass files */

.font-head,
.navbar,
.sidebar {
  font-family: 'Poiret One', cursive;
  font-weight: 100;
  letter-spacing: 2.2px;
}
.font-para,
input[type='text'] {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 100;
  letter-spacing: 1.4px;
}
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-family: 'Source Sans Pro', sans-serif;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
}
/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: white;
}
header {
  width: 100%;
  background-color: #1a70c5;
  padding: 10px;
}
span {
  box-sizing: border-box;
  position: relative;
  font-size: 28px;
  color: #F8F8F8;
}
h1 {
  font-family: 'Poiret One', cursive;
  letter-spacing: 2.2px;
  margin-left: 10px;
  color: white;
  font-size: 28px;
  display: inline-block;
}
.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: 46%;
  height: 100%;
  padding: 10px 10px 10px 10px;
}
.project,
.today {
  display: inline-block;
  position: relative;
  width: 100%;
  word-wrap: break-all;
  font-size: 24px;
  line-height: 1.63em;
  padding: 20px
}
input[type='text'] {
  position: static;
  border: none;
  background: transparent;
  font-size: 16px;
  line-height: 16px;
  width: 100%;
  height: 30px;
  color: black;
}
input[type='text']:focus {
  outline: none;
  border: none;
}
::-webkit-input-placeholder {
  color: #D9D9D9;
}
::-webkit-scrollbar {
  display: none;
}
#maindiv {
  width: 400px;
  height: 550px;
  position: absolute;
  top: 30%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-30%);
  transform: translateX(-50%) translateY(-30%);
  overflow: hidden;
}
.sidebar {
  position: fixed;
  left: -155px;
  height: 100%;
  bottom: 0px;
  width: 150px;
  background: #333;
}
.sidebar ul {
  padding: 0px 5px;
}
.sidebar li {
  color: #F7F7F7;
  font-weight: 100;
  font-size: 22px;
  text-align: center;
  margin-top: 30px;
}
.sidebar li:first-child {
  margin-top: 10px;
}
#profile {
  height: 50px;
  width: 98%;
  margin-top: 10px;
}
#profile img {
  vertical-align: middle;
  border: 1px solid #333;
  border-radius: 100%;
}
#profile span {
  display: inline-block;
  padding: 5px 0px 0px 10px;
  color: white;
  font-size: 18px;
}
@media (max-width: 450px) {
  #maindiv {
    width: 100%;
    height: 100%;
  }
}
<div id="maindiv">
  <div class="sidebar">
    <div id="profile">
      <img src="something.jpg" width="40" height="40" /><span>Derp</span>
    </div>
    <ul>
      <li>Home</li>
      <li>+Project</li>
      <li>+Task</li>
      <li>Reminders</li>
      <li>Statistics</li>
      <li>Settings</li>
      <li>Help</li>
      <li><a href="/logout">Log Out</a>
      </li>
    </ul>
  </div>
  <header><span>☰</span>
    <h1>Derp Title</h1>
  </header>
  <div class="container">
    <div class="navbar">
      <div class="navbar-inside-one below">
        <h2>Projects</h2>
      </div>
      <div class="navbar-inside-two above">
        <h2>Today</h2>
      </div>
    </div>
    <div id="data-container">
      <div class="project">
        <p>Stupid paragraph dosen't wrap when supposed to</p>
      </div>
      <div class="today">
        <input id="task" type="text" placeholder="+ Add a New Task" autocomplete="off" />
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

ОТВЕТЫ

Ответ 1

Попробуй это:

#data-container {
    white-space: nowrap;
}
.project, .today {
    white-space: normal;
}

Вы также можете рассмотреть #data-container {overflow-y: auto} чтобы удалить некрасивую полосу прокрутки... все равно следует прокрутить.

Другая вещь, которую вы можете сделать, это дать #data-container 200% ширины и его дочерним элементам 50% ширины, а затем сдвинуть #data-container.

Ответ 2

Я устал ждать, и мне нужно решение. Это никоим образом не то, что я хотел или совершенный, но это дает иллюзию того, что я хотел.

Я сделал .today до display: none, #data-container до overflow-y: auto и overflow-x: hidden, а затем изменил анимацию.

Затем анимация теперь перемещает текущий div куда-нибудь, а затем оживляет его обратно из этой позиции.

Новая анимация

$('.navbar-inside-two').click(function() {
        if($(this).hasClass('above')) {
            $(".today").css({
                display: 'inline-block',
                left: $("#data-container").width()
            });
            $(".project").css('display', 'none');
            $(".project, .today").animate({left: '0px'}, 150);
            $(".navbar-inside-one").removeClass('below').addClass('above');
            $(this).removeClass('above').addClass('below');
        }
    });

    $('.navbar-inside-one').click(function() {
        if($(this).hasClass('above')) {
            $(".project").css({
                display: 'inline-block',
                left: '-' + $("#data-container").width()
            });
            $(".today").css('display', 'none');
            $(".project").animate({left: "0"}, 150);
            $(".navbar-inside-two").removeClass('below').addClass('above');
            $(this).removeClass('above').addClass('below');
        }
    });

Ответ 3

Существует аккуратный и простой способ сделать это с помощью flex. Вот мое предложение:

#data-container {
    display: flex;
}

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

Вы также получаете вертикальную прокрутку, когда содержимое любого div превышает высоту.