javascript - 使用jQuery设置默认内容(Setting default content with jQuery)

Question

In the code below, the default main content is empty.

(在下面的代码中，默认主要内容为空。)

Unless I click on any of the bottom navbar buttons, no content will show up.

(除非单击底部的导航栏按钮，否则不会显示任何内容。)

I'd like to set content-1 and menu-1 (its respective button) to be the default, ie when the user opens the webpage it would be the first thing they see and the button would be black indicating that it is active.

(我想将content-1和menu-1 （其各自的按钮）设置为默认值，即，当用户打开网页时，这将是他们看到的第一件事，并且该按钮将为黑色，表明它处于活动状态。)

I tried to use an else statement but it did not work:

(我尝试使用else语句，但是它不起作用：)

    // set menu-1 as default
    else {
      $('.menu-1').addClass('default')
      $('.content').addClass('default')
    }

Find the entire code below:

(在下面找到完整的代码：)

$(document).ready(function() {

  // only show menu-1
  $('.menu-1').click(function() {
    if ($('.menu-2, .menu-3').hasClass('active')) {
      $('.menu-2, .menu-3').removeClass('active');
            $('.content-2, .content-3').removeClass('active');
    }

    // set menu-1 as default
    // else {
    //   $('.menu-1').addClass('default')
    //   $('.content').addClass('default')
    // }

    $('.menu-1').addClass('active');
    $('.content-1').addClass('active'); 
  });

  // only show menu-2
    $('.menu-2').click(function() {
    if ($('.menu-1, .menu-3').hasClass('active')) {
      $('.menu-1, .menu-3').removeClass('active');
            $('.content-1, .content-3').removeClass('active');
    }

    $('.menu-2').addClass('active');
    $('.content-2').addClass('active'); 
  });

  // only show menu-3
    $('.menu-3').click(function() {
    if ($('.menu-2, .menu-1').hasClass('active')) {
      $('.menu-2, .menu-1').removeClass('active');
            $('.content-2, .content-1').removeClass('active');
    }

    $('.menu-3').addClass('active');
    $('.content-3').addClass('active'); 
  });  
});

.container {
  margin: 0 auto;
  background-color: #eee;
  border: 1px solid lightgrey;
  width: 20vw;
  height: 90vh;
  font-family: sans-serif;

  position: relative;
}

header {
  background-color: lightgreen;
  padding: 5px;
  text-align: center;
  text-transform: uppercase;
}

.bottom-navbar {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 6px 0;
  overflow: hidden;
  background-color: lightgreen;
  border-top: 1px solid var(--color-grey-dark-3);
  z-index: 50;

  display: flex;
  justify-content: space-between;

      > a {
      display: block;
      color: green;
      text-align: center;
      text-decoration: none;
      font-size: 20px;
      padding: 0 10px;

      &.active {
        color: black;
      }
    }
}

.menu-1.default,
.menu-1.active,
.menu-2.active,
.menu-3.active {
  color: black;
}

.content-1,
.content-2,
.content-3 {
  display: none;
}

.content-1.default,
.content-1.active,
.content-2.active,
.content-3.active {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

<div class="container">
  <header>My header</header>
  <div class="main-content">
    <div class="content-1">House content</div>
    <div class="content-2">Map content</div>
    <div class="content-3">Explore content</div>
  <div class="bottom-navbar">
    <a href="#" class="menu-1"><i class="fa fa-home"></i></a>
    <a href="#" class="menu-2"><i class="fa fa-map"></i></a>
    <a href="#" class="menu-3"><i class="fa fa-search"></i></a>
  </div>
</div>

In case you find it easier, here's my CodePen : https://codepen.io/fergos2/pen/vYYaRzN

(如果您觉得更简单，请使用我的CodePen ： https : //codepen.io/fergos2/pen/vYYaRzN)

  ask by Fergo translate from so

Answer 1

All that is going on to set up each menu and content item to display on the page is adding the class active .

(设置要显示在页面上的每个菜单和内容项的全部工作就是添加active类。)

So it looks to me like all you need to do is add that class to the HTML.

(因此，在我看来，您需要做的就是将该类添加到HTML中。)

That way when the page loads it's already "active" and when you click something else you already have it set up to remove the class and set something else as active.

(这样，当页面加载时，它已经“处于活动状态”，而当您单击其他内容时，已经对其进行了设置，以删除该类并将其他内容设置为活动状态。)

So basically, your HTML would look like this:

(因此，基本上，您的HTML将如下所示：)

  <header>My header</header>
  <div class="main-content">
    <div class="content-1 active">House content</div>
    <div class="content-2">Map content</div>
    <div class="content-3">Explore content</div>
  <div class="bottom-navbar">
    <a href="#" class="menu-1"><i class="fa fa-home active"></i></a>
    <a href="#" class="menu-2"><i class="fa fa-map"></i></a>
    <a href="#" class="menu-3"><i class="fa fa-search"></i></a>
  </div>
</div>

All I did was give .menu-1 and .content-1 the class of active .

(我所做的只是为.menu-1和.content-1设置了active类。)

You'll also need to get rid of the css bit which references .content-1.default and .menu-1.default and also set your JS to add the .active back when you click that menu button which you already have.

(您还需要摆脱引用.content-1.default和.menu-1.default的css位，并且还需要设置JS，以在单击该菜单按钮时添加.active 。)

Don't worry about the else statement inside that click function

(不用担心click函数中的else语句)

Let me know if this works out for you!

(让我知道这是否适合您！)