CODEWITHSUNDEEP
javascripthtmljquerycss
Vyas
Vyas

Reputation: 101

Display information by clicking a link

In my webpage, I have four links (tab1, tab2, tab3, tab4); I want to click on each tab to display specific textual information within the same webpage in a box or area. How should I approach this using HTML/CSS or possibly jquery or JS? An example will be appreciated. Thanks

Upvotes: 0

Views: 1337

Answers (2)

ManuelMB
ManuelMB

Reputation: 1377

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
      .info {
        padding: 5px;
        border: 1px solid #DEDEDE; 
        margin: 5px 0;
        background: #EFEFEF;
        color: #222222;
        text-align: center;
      }
    </style>
</head>
<body>
    <div id='messageBox' class='info'>&nbsp;</div>

    <a onclick="showHint(0);">Message 1</a>
    <a onclick="showHint(1);">Message 2</a>
    <a onclick="showHint(2);">Message 3</a>
    <a onclick="showHint(3);">Message 4</a>

    <script>
        const allMessages = ['Hello World', 'Hello Moon', 'Hello Mars', 'Hello Jupyter']
        function showHint(index){
            const messageBox = document.getElementById('messageBox')
            messageBox.textContent = allMessages[index]
        }
    </script>
</body>
</html>

Upvotes: 0

Nikita TSB
Nikita TSB

Reputation: 460

$(function () {

  var $tab_contents = $('.tabs-content li'),
      $tab_buttons = $('.tabs li');

  $('.tabs').on('click', 'li', function (e) {
    var $current = $(e.currentTarget),
        index = $current.index();
    
    $tab_buttons.removeClass('active-tab');
    $current.addClass('active-tab');
    $tab_contents.hide().eq(index).show();
     });
});
.tabs {
  list-style: none;
}

.tabs .active-tab {
  color: black;
}

.tabs li {
  display: inline-block;
  cursor: pointer;
  color: blue;
}

.tabs-content {
  list-style: none;
}

.tabs-content li {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<ul class="tabs">
  <li>First tab</li>
  <li>Second tab</li>
  <li>Third tab</li>
  <li>Fourth tab</li>
</ul>

<ul class="tabs-content">
  <li>Content of first tab</li>
  <li>Content of second tab</li>
  <li>Content of third tab</li>
  <li>Content of fourth tab</li>
</ul>

Upvotes: 0

Related Questions