Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

javascript - How to make only one div at the time appear upon selection from navbar buttons?

0 votes
97 views
in Technique[技术] by (71.8m points)

javascript - How to make only one div at the time appear upon selection from navbar buttons?

I'm trying to display the appropiate div only when clicking a button on the left navbar (and therefore not displaying all the others).

IE:

If I click "Profile" on the left navbar, the My Profile Form div will display (and all other will stay not displayed)

If I click "My Properties" on the left navbar, the My Properties div will display (and all other will stay not displayed)

And so on for all the other buttons.

How can I do that?

const ProfileForm = document.getElementById('profile_container');
const ProfileButton = document.getElementById('profile_id');
const PropertiesForm = document.getElementById('my_properties_container');
const BidsForm = document.getElementById('my_bids');
const UtilitiesForm = document.getElementById('my_utilities');
const FavouritesForm = document.getElementById('my_favourites');
const MessagesForm = document.getElementById('my_messages');
const SettingsForm = document.getElementById('my_settings');
document.body.addEventListener('click', e => {
  if (e.target == ProfileButton) {
    ProfileForm.style.display = 'block'
  } else { /*ProfileForm.style.display='none'*/ }
})
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
* {
  margin: 0;
  padding: 0;
  /*    border: thick solid blue;*/
  font-family: 'Roboto', sans-serif;
}

html {
  height: 100%;
  /*border: thick solid yellow;*/
}

body {
  height: 100%;
  /*    width: 100%;*/
  display: flex;
  flex-direction: column;
  /*border: thick solid red;*/
  visibility: visible;
  /*background-color: #003580;*/
}


/*BUTTON BACKGROUND COLORS*/

.header_right_container_inner_center_button,
.header_right_container_inner_right_button {
  background-color: #febb02;
}


/*BUTTON HOVER COLORS*/

.header_right_container_inner_right_button:hover,
.header_right_container_inner_center_button:hover {
  background: #003580;
  color: white;
}


/* BUTTON FONT COLORS*/

.header_right_container_inner_center_button,
.header_right_container_inner_right_button {
  color: black;
}

a {
  text-decoration: none;
}

.logo {
  /*border: thick dotted blue;*/
  width: 120px;
  margin-top: -33%;
  margin-bottom: -33%;
  /*border-radius:50%;*/
}


/* HEADER START */

header {
  display: flex;
  /*    border: thick solid red;*/
  justify-content: center;
  border-bottom: thin solid black;
  padding: 9px;
  background-color: #003580;
}


/* HEADER LEFT SIDE */

.header_left_container {
  display: flex;
  flex: 1;
  /*    border: thick solid yellow;*/
  justify-content: center;
}

.header_left_container_inner_left {
  /*    border: thick solid green;*/
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.header_left_container_inner_right {
  /*    border: thick solid green;*/
  display: flex;
  flex: 5;
  align-items: center;
  justify-content: flex-start;
}


/* HEADER RIGHT SIDE */

.header_right_container {
  display: flex;
  flex: 3;
  /*    border: thick solid yellow;*/
  justify-content: center;
}

.header_right_container_inner_left {
  display: flex;
  /*    border: thick solid green;*/
  flex: 4;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}

li {
  /*    display:inline;*/
  padding: 10px;
}

a {
  display: flex;
  flex-wrap: nowrap;
  color: white;
  font-size: 12px;
}

.search_input_input {
  flex: 1;
  color: white;
  background-color: #003580;
  margin: 0;
  border: 0px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 333;
  height: 45px;
  text-align: center;
  resize: none;
  outline: none;
  cursor: pointer;
  width: 99px;
}

.search_input_widget {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: #003580;
  margin: 0;
  padding-left: 6%;
  border: 0;
  text-align: center;
  cursor: pointer;
  width: 120px;
}

.header_right_container_inner_left_list {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  list-style-type: none;
}

.header_right_container_inner_center {
  display: flex;
  /*    border: thick solid green;*/
  flex: 1;
  justify-content: flex-end;
}

.header_right_container_inner_center_button {
  display: flex;
  align-items: center;
  /*    background-color: #E00000;*/
  border: 1px solid #003580;
  border-radius: 6px;
  padding: 0 25px;
  margin-left: 12px;
  /*    color: white;*/
  font-size: 15px;
  font-weight: 333;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  resize: none;
  outline: none;
}

.header_right_container_inner_right {
  display: flex;
  /*    border: thick solid green;*/
  flex: 1;
  justify-content: center;
}

.header_right_container_inner_right_button {
  display: flex;
  align-items: center;
  background-color: #febb02;
  border: 1px solid #003580;
  border-radius: 6px;
  padding: 0 25px;
  margin-left: 12px;
  color: black;
  font-size: 15px;
  font-weight: 333;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  resize: none;
  outline: none;
}

select.select_city_header {
  border: 1px solid #fff;
  /*    background-color: rgba(255,255,255,.5);*/
  padding: 5px;
  margin-left: 15px;
  background-color: #003580;
  color: white;
  font-size: 12px;
}

.main_dashboard_container {
  display: flex;
  flex-wrap: nowrap;
  /*    color: white;*/
  /*border: thick solid red;*/
}

.left_navbar {
  height: 90vh;
  flex: 1;
  background-color: #003580;
  border-bottom: 6px solid #003580;
}

.dashboard_buttons {
  font-family: 'Lato', sans-serif;
  padding: 12px 50px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: thin solid black;
  cursor: pointer;
  background-color: #003580;
  color: white;
}

.dashboard_buttons:hover {
  background-color: #39CCCC;
  color: white;
}

.dashboard_right_container_wrap {
  position: absolute;
  /*margin-top: 21%;*/
  overflow: auto;
}

.right_content {
  flex: 4;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /*margin-top: 1467px;*/
}

.profile_container {
  margin-bottom: 18%;
  /*position: absolute;*/
  /*display: flex;*/
  /*flex-direction: column;*/
  /*justify-content: flex-start;*/
  /*align-items: center;*/
}

.profile_title {
  text-align: center;
  font-size: 33px;
  font-weight: 333;
  color: #003580;
  padding: 12px;
}

.profile_form {
  border: thin solid #003580;
  display: flex;
  flex-direction: column;
  /*align-items: flex-start;*/
  width: 666px;
  height: auto;
}

.profile_internal_container {
  border: thin solid #003580;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: 6px;
}

.label_profile_form {
  /*border: thick solid green;*/
  width: 120px;
}

.input_profile_form {
  /*border: thick solid green;*/
  width: 160px;
  /*text-align: center;*/
  align-self: center;
  font-size: 15px;
  font-weight: 333;
  text-decoration: none;
  cursor: pointer;
  resize: none;
  outline: none;
  border: transparent;
  margin-left: 33px;
}

#inp,
#inp2 {
  /*text-align: center;*/
  margin: auto;
  width: 240px;
}

.profile_form_dropdown {
  font-size: 15px;
  font-weight: 333;
  /*text-align-last:center;*/
  border: 0;
  margin: 0;
  margin-left: 33px;
}

.profile_save_button_container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile_save_button {
  border: thin solid #003580;
  background-color: #003580;
  color: white;
  width: 180px;
  height: 45px;
  border-radius: 6px;
  padding: 0 25px;
  margin: 33px;
  font-size: 15px;
  font-weight: 333;
  cursor: pointer;
  resize: none;
  outline: none;
  text-align: center;
}

.profile_save_button:hover {
  background-color: #39CCCC;
  border: thin solid #39CCCC;
  color: white;
}

.ul_flex {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.my_properties_container {
  position: absolute;
}

.properties_dashboard {
  border: thick solid yellow;
  width: 666px;
  height: 350px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://kit.fontawesome.com/99c0db90d1.js" crossorigin="anonymous"></script>
  <link rel="shortcut icon" type="image/jpg" href="images/33.png" />
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
  <link href="/css/all.css" rel="stylesheet">
  <!--load all styles -->
  <title>Index</title>
</head>

<body id="body">
  <! -- HEADER START -->
  <header>
    <! -- HEADER LEFT SIDE CONTAINER START -->
    <div class="header_left_container">
      <div class="header_left_container_inner_left">
        <img class="logo" src="images/1.png" alt="">
      </div>
      <div class="header_left_container_inner_right">
        <form action="">
          <select class="select_city_header" name="emirate" id="emirate" style="border: 0;">
            <option value="dubai">Dubai</option>
            <option value="abu_dhabi">Abu Dhabi</option>
            <option value="ajman">Ajman</option>
            <option value="al_ain">Al Ain</option>
            <option value="dubai">Dubai</option>
            <option value="fujeirah">Fujairah</option>
            <option value="ras_al_khaimah">Ras Al Khaimah</option>
            <option value="sharjah">Sharjah</option>
            <option value="umm_al_qwain">Umm Al Qwain</option>
          </select>
        </form>
      </div>
    </div>
    <! -- HEADER LEFT SIDE CONTAINER STOP -->
    <! -- HEADER RIGHT SIDE CONTAINER START -->
    <div class="header_right_container">
      <div class="header_right_container_inner_left">
        <ul class="header_right_container_inner_left_list">
          <li><a href="#" style="text-decoration: none;">Residential</a></li>
          <li><a href="#" style="text-decoration: none">Commercial</a></li>
          <li><a href="#" style="text-decoration: none">Room</a></li>
          <li><a href="#" style="text-decoration: none">Short-Term</a></li>
          <!--I'll put in this 2 icons, monthly and daily-->
          <li><a href="#" style="text-decoration: none"><i class="far fa-envelope" style="padding-right:9px;"></i>Inbox</a></li>
        </ul>
        <div class="search_input_widget">
          <i class="fas fa-search" style="padding-right:9px;"></i>
          <input type="text" placeholder="Search" class="search_input_input">
        </div>
      </div>
      <div class="header_right_container_inner_center">
        <button class="header_right_container_inner_center_button">Login</button>
      </div>
      <div class="header_right_container_inner_right">
        <button class="header_right_container_inner_right_button">Place Your Ad</button>
      </div>
    &l

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

I would suggest to use dataset property for each dashboard_buttons. For instance, if the first button refers to the profile container you can add a property like:

<li class="dashboard_buttons" id="profile_id" data-id="profile_container"

where the data-id stands for the id of the element to display.

In this way your event listener becomes:

document.body.addEventListener('click', function (e) {
    var eleToDislay = '#' + e.target.dataset.id; // get id of element to display
    $('.right_content .profile_container').hide();  // hide all previous elements...
    $(eleToDislay).show();  // show correct element....
})

You may also consider to use a full jQuery event listner, from

document.body.addEventListener('click', function (e) {

to:

$(document).on('click', function (e) {

The snippet:

$(document).on('click', function (e) {
    var eleToDislay = '#' + e.target.dataset.id;
    $('.right_content .profile_container').hide();
    $(eleToDislay).show();
})
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

* {
    margin: 0;
    padding: 0;
    /*    border: thick solid blue;*/
    font-family: 'Roboto', sans-serif;
}

html {
    height: 100%;
    /*border: thick solid yellow;*/
}

body {
    height: 100%;
    /*    width: 100%;*/
    display: flex;
    flex-direction: column;
    /*border: thick solid red;*/
    visibility: visible;
    /*background-color: #003580;*/
}

/*BUTTON BACKGROUND COLORS*/

.header_right_container_inner_center_button,
.header_right_container_inner_right_button {
    background-color: #febb02;
}

/*BUTTON HOVER COLORS*/

.header_right_container_inner_right_button:hover,
.header_right_container_inner_center_button:hover {
    background: #003580;
    color: white;
}

/* BUTTON FONT COLORS*/

.header_right_container_inner_center_button,
.header_right_container_inner_right_button {
    color: black;
}

a {
    text-decoration: none;
}

.logo {
    /*border: thick dotted blue;*/
    width: 120px;
    margin-top: -33%;
    margin-bottom: -33%;
    /*border-radius:50%;*/
}

/* HEADER START */

header {
    display: flex;
    /*    border: thick solid red;*/
    justify-content: center;
    border-bottom: thin solid black;
    padding: 9px;
    background-color: #003580;
}

/* HEADER LEFT SIDE */

.header_left_container {
    display: flex;
    flex: 1;
    /*    border: thick solid yellow;*/
    justify-content: center;
}

.header_left_container_inner_left {
    /*    border: thick solid green;*/
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}

.header_left_container_inner_right {
    /*    border: thick solid green;*/
    display: flex;
    flex: 5;
    align-items: center;
    justify-content: flex-start;
}

/* HEADER RIGHT SIDE */

.header_right_container {
    display: flex;
    flex: 3;
    /*    border: thick solid yellow;*/
    justify-content: center;
}

.header_right_container_inner_left {
    display: flex;
    /*    border: thick solid green;*/
    flex: 4;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
}

li {
    /*    display:inline;*/
    padding: 10px;
}

a {
    display: flex;
    flex-wrap: nowrap;
    color: white;
    font-size: 12px;
}

.search_input_input {
    flex: 1;
    color: white;
    background-color: #003580;
    margin: 0;
    border: 0px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 333;
    height: 45px;
    text-align: center;
    resize: none;
    outline: none;
    cursor: pointer;
    width: 99px;
}

.search_input_widget {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: #003580;
    margin: 0;
    padding-left: 6%;
    border: 0;
    text-align: center;
    cursor: pointer;
    width: 120px;
}

.header_right_container_inner_left_list {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    list-style-type: none;
}

.header_right_container_inner_center {
    display: flex;
    /*    border: thick solid green;*/
    flex: 1;
    justify-content: flex-end;
}

.header_right_container_inner_center_button {
    display: flex;
    align-items: center;
    /*    background-color: #E00000;*/
    border: 1px solid #003580;
    border-radius: 6px;
    padding: 0 25px;
    margin-left: 12px;
    /*    color: white;*/
    font-size: 15px;
    font-weight: 333;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    resize: none;
    outline: none;
}

.header_right_container_inner_right {
    display: flex;
    /*    border: thick solid green;*/
    flex: 1;
    justify-content: center;
}

.header_right_container_inner_right_button {
    display: flex;
    align-items: center;
    background-color: #febb02;
    border: 1px solid #003580;
    border-radius: 6px;
    padding: 0 25px;
    margin-left: 12px;
    color: black;
    font-size: 15px;
    font-weight: 333;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    resize: none;
    outline: none;
}

select.select_city_header {
    border: 1px solid #fff;
    /*    background-color: rgba(255,255,255,.5);*/
    padding: 5px;
    margin-left: 15px;
    background-color: #003580;
    color: white;
    font-size: 12px;
}

.main_dashboard_container {
    display: flex;
    flex-wrap: nowrap;
    /*    color: white;*/
    /*border: thick solid red;*/
}

.left_navbar {
    height: 90vh;
    flex: 1;
    background-color: #003580;
    border-bottom: 6px solid #003580;
}

.dashboard_buttons {
    font-family: 'Lato', sans-serif;
    padding: 12px 50px;
    font-size: 16px;
    font-weight: 500;
    border-bottom: thin solid black;
    cursor: pointer;
    background-color: #003580;
    color: white;
}

.dashboard_buttons:hover {
    background-color: #39CCCC;
    color: white;
}

.dashboard_right_container_wrap {
    position: absolute;
    /*margin-top: 21%;*/
    overflow: auto;
}

.right_content {
    flex: 4;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /*margin-top: 1467px;*/
}

.profile_container {
    margin-bottom: 18%;
    /*position: absolute;*/
    /*display: flex;*/
    /*flex-direction: column;*/
    /*justify-content: flex-start;*/
    /*align-items: center;*/
}

.profile_title {
    text-align: center;
    font-size: 33px;
    font-weight: 333;
    color: #003580;
    padding: 12px;
}

.profile_form {
    border: thin solid #003580;
    display: flex;
    flex-direction: column;
    /*align-items: flex-start;*/
    width: 666px;
    height: auto;
}

.profile_internal_container {
    border: thin solid #003580;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 6px;
}

.label_profile_form {
    /*border: thick solid green;*/
    width: 120px;
}

.input_profile_form {
    /*border: thick solid green;*/
    width: 160px;
    /*text-align: center;*/
    align-self: center;
    font-size: 15px;
    font-weight: 333;
    text-decoration: none;
    cursor: pointer;
    resize: none;
    outline: none;
    border: transparent;
    margin-left: 33px;
}

#inp,
#inp2 {
    /*text-align: center;*/
    margin: auto;
    width: 240px;
}

.profile_form_dropdown {
    font-size: 15px;
    font-weight: 333;
    /*text-align-last:center;*/
    border: 0;
    margin: 0;
    margin-left: 33px;
}

.profile_save_button_container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile_save_button {
    border: thin solid #003580;
    background-color: #003580;
    color: white;
    width: 180px;
    height: 45px;
    border-radius: 6px;
    padding: 0 25px;
    margin: 33px;
    font-size: 15px;
    font-weight: 333;
    cursor: pointer;
    resize: none;
    outline: none;
    text-align: center;
}

.profile_save_button:hover {
    background-color: #39CCCC;
    border: thin solid #39CCCC;
    color: white;
}

.ul_flex {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.my_properties_container {
    position: absolute;
}

.properties_dashboard {
    border: thick solid yellow;
    width: 666px;
    height: 350px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<! -- HEADER START -->
<header>
    <! -- HEADER LEFT SIDE CONTAINER START -->
    <div class="header_left_container">
        <div class="header_left_container_inner_left">
            <img class="logo" src="images/1.png" alt="">
        </div>
        <div class="header_left_container_inner_right">
            <form action="">
                <select class="select_city_header" name="emirate" id="emirate" style="border: 0;">
                    <option value="dubai">Dubai</option>
                    <option value="abu_dhabi">Abu Dhabi</option>
                    <option value="ajman">Ajman</option>
                    <option value="al_ain">Al Ain</option>
                    <option value="dubai">Dubai</option>
                    <option value="fujeirah">Fujairah</option>
                    <option value="ras_al_khaimah">Ras Al Khaimah</option>
                    <option value="sharjah">Sharjah</option>
                    <option value="umm_al_qwain">Umm Al Qwain</option>
                </select>
            </form>
        </div>
    </div>
    <! -- HEADER LEFT SIDE CONTAINER STOP -->
    <! -- HEADER RIGHT SIDE CONTAINER START -->
    <div class="header_right_container">
        <div class="header_right_container_inner_left">
            <ul class="header_right_container_inner_left_list">
                <li><a href="#" style="text-decoration: none;">Residential</a></li>
                <li><a href="#" style="text-decoration: none">Commercial</a></li>
                <li><a href="#" style="text-decoration: none">Room</a></li>
                <li><a href="#" style="text-decoration: none">Short-Term</a></li>
                <!--I'll put in this 2 icons, monthly and daily-->
                <li><a href="#" style="text-decoration: none"><i class="far fa-envelope" style="padding-right:9px;"></i>Inbox</a>
                </li>
            </ul>
            <div class="search_input_widget">
                <i class="fas fa-search" style="padding-right:9px;"></i>
                <input type="text" placeholder="Search" class="search_input_input"&g

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

56.9k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...