keep div active until new function runs-CodePudding

I am trying to show a div inside another div , basically when i click on active (a list item) , An active order div will be displayed and stay active until i click on any other list item . I tried simple js code but the problem is ,when i click on active my hidden Div show for like mini-seconds and then disappear automatically i want the div to stay active until i click any other list item

function showactive() {
  document.getElementById('active_order').style.display = "block";
}

body {
  background-color: lightgrey;
}

#tab_menu_order {
  margin: 5px;
  width: 95%;
  height: 500px;
  background-color: var(--primary);
  color: var(--secondary);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  padding: 5px;
  border: 2px solid red;
}

#manage_order {
  font-size: 40px;
  margin: 10px;
}

#order_list_items {
  border: 2px solid red;
  padding: 10px;
  display: flex;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
}

#order_list_items a {
  color: white;
  display: flex;
  font-size: larger;
  font-weight: bolder;
  margin: 20px;
  list-style: none;
  padding: 5px;
  cursor: pointer;
  text-decoration: none;
  margin-top: 5px;
  margin-bottom: 5px;
}

#order_list_items a:hover {
  transition: 0.3s linear;
  color: yellow;
}


/*hidden div css********************************/

#show_each_div {
  margin-top: 5px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 300px;
  border: 2px solid greenyellow;
  padding: 5px;
}

.hidden_boxes {
  width: 100%;
  height: 300px;
  background-color: white;
  color: black;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  border: 3px solid red;
}

<div id="tab_menu_order">
  <h1 id="manage_order">
    Manage Orders
  </h1>
  <ul id="order_list_items">
    <a href="" onclick="showactive()">Active</a>
    <a href="">Missing details</a>
    <a href="">Awaiting details</a>
    <a href="">Deliver</a>
    <a href="">Completed</a>
    <a href="">Cancelled</a>
    <a href="">All</a>
  </ul>
  <div id="show_each_div">
    <div style="display: none;"  id="active_order">
      <h1>No data available</h1>
    </div>
    <div style="display: none;"  id="missing_details">
      <h1>No data available</h1>
    </div>
    <div style="display: none;"  id="Awaiting_review">
      <h1>No data available</h1>
    </div>
    <div style="display: none;"  id="deliver">
      <h1>No data available</h1>
    </div>
    <div style="display: none;"  id="completed">
      <h1>No data available</h1>
    </div>
    <div style="display: none;"  id="cancelled">
      <h1>No data available</h1>
    </div>
    <div style="display: none;"  id="all">
      <h1>No data available</h1>
    </div>
  </div>
</div>

kindly guide me what the issues i am facing , or tell me any best way to do this

CodePudding user response：

No need for scripting at all. Youc an do this by using the anchor to direct to an element's id such as <a href="#id-of-element">.

Then hide all the boxes with: .hidden_boxes { display: none; }

Last but nto least you make those element visible again by using: :target { display: flex; }

.hidden_boxes {
  display: none;
}

:target {
  display: flex;
}

/* original CSS */
body {
  background-color: lightgrey;
}

#tab_menu_order {
  margin: 5px;
  width: 95%;
  height: 500px;
  background-color: var(--primary);
  color: var(--secondary);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  padding: 5px;
  border: 2px solid red;
}

#manage_order {
  font-size: 40px;
  margin: 10px;
}

#order_list_items {
  border: 2px solid red;
  padding: 10px;
  display: flex;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
}

#order_list_items a {
  color: white;
  display: flex;
  font-size: larger;
  font-weight: bolder;
  margin: 20px;
  list-style: none;
  padding: 5px;
  cursor: pointer;
  text-decoration: none;
  margin-top: 5px;
  margin-bottom: 5px;
}

#order_list_items a:hover {
  transition: 0.3s linear;
  color: yellow;
}


/*hidden div css********************************/

#show_each_div {
  margin-top: 5px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 300px;
  border: 2px solid greenyellow;
  padding: 5px;
}

.hidden_boxes {
  width: 100%;
  height: 300px;
  background-color: white;
  color: black;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  border: 3px solid red;
}

<div id="tab_menu_order">
  <h1 id="manage_order">
    Manage Orders
  </h1>
  <ul id="order_list_items">
    <a href="#active_order">Active</a>
    <a href="#missing_details">Missing details</a>
    <a href="#Awaiting_review">Awaiting details</a>
    <a href="#deliver">Deliver</a>
    <a href="#completed">Completed</a>
    <a href="#cancelled">Cancelled</a>
    <a href="#all">All</a>
  </ul>
  <div id="show_each_div">
    <div  id="active_order">
      <h1>No data available</h1>
    </div>
    <div  id="missing_details">
      <h1>No data available</h1>
    </div>
    <div  id="Awaiting_review">
      <h1>No data available</h1>
    </div>
    <div  id="deliver">
      <h1>No data available</h1>
    </div>
    <div  id="completed">
      <h1>No data available</h1>
    </div>
    <div  id="cancelled">
      <h1>No data available</h1>
    </div>
    <div  id="all">
      <h1>No data available</h1>
    </div>
  </div>
</div>

CodePudding user response：

Because the element you are targeting for the click event is an anchor tag, you first have to prevent the default behavior(which is to navigate to the href of the anchor). You can do that by passing the event into the function and then using event.preventDefault()

function showactive(e) {
  e.preventDefault();
  document.getElementById('active_order').style.display = "flex";
}

#tab_menu_order
{
    margin: 5px;
    width: 95%;
    height: 500px;
    background-color: var(--primary);
    color: var(--secondary);
    display: flex;
    align-items: flex-start;
    justify-content:flex-start;
    flex-direction: column;
    padding: 5px;
    border: 2px solid red;

}

#manage_order
{
    font-size: 40px;
    margin: 10px;
}
#order_list_items
{
    border: 2px solid red;
    padding: 10px;
    display: flex;
    width: 100%;
   margin-top:5px ;
   margin-bottom: 5px;
}
#order_list_items a
{
    color: white;
    display: flex;
    font-size: larger;
    font-weight: bolder;
    margin: 20px;
    list-style: none;
    padding: 5px;
    cursor: pointer;
    text-decoration: none;
    margin-top:5px ;
    margin-bottom: 5px;
}
#order_list_items a:hover
{
    transition: 0.3s linear;
    color: yellow;
}

/*hidden div css********************************/
#show_each_div{
    margin-top:5px ;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content:center;
    flex-direction: column;
    width: 100%;
    height: 300px;
    border: 2px solid greenyellow;
    padding: 5px;
}
.hidden_boxes
{
    width: 100%;
    height: 300px;
    background-color: white;
    color: black;
    display: none;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    border: 3px solid red;
}

<div id="tab_menu_order">
    <h1 id="manage_order">
        Manage Orders
    </h1>
    <ul id="order_list_items">
        <a href="#" onclick="showactive(event)">Active</a>
        <a href="#">Missing details</a>
        <a href="#">Awaiting details</a>
        <a href="#">Deliver</a>
        <a href="#">Completed</a>
        <a href="#">Cancelled</a>
        <a href="#">All</a>
    </ul>
    <div id="show_each_div">
        <div  id="active_order">
            <h1>No data available</h1>
        </div>
        <div  id="missing_details">
            <h1>No data available</h1>
        </div>
        <div  id="Awaiting_review">
            <h1>No data available</h1>
        </div>
        <div  id="deliver">
            <h1>No data available</h1>
        </div>
        <div  id="completed">
            <h1>No data available</h1>
        </div>
        <div  id="cancelled">
            <h1>No data available</h1>
        </div>
        <div  id="all">
            <h1>No data available</h1>
        </div>
    </div>
</div>