Webpage featuring tabs aligned horizontally

Question

Webpage featuring tabs aligned horizontally

Can anyone guide me on setting up horizontal tabs similar to the design in this image: https://i.sstatic.net/ewXO4.png?

Below is the code snippet:

<label class="formlabel">Title 1:</label>
<div id="radio_form">
    <label><input type="radio" value="1" name="status">Activated</label>
    <br>
    <label><input type="radio" value="0" name="status">Deactivated</label>
    <br><br>
</div>
<label class="formlabel">Title 2:</label>
<input name="input2" type="text" class="forminput" />
<label class="formlabel">Title 3:</label>
<input name="input3" type="text" class="forminput" />  

<input class="formsubmit" type="submit" name ='submit' value="Save">

I am looking to place title/input 3 on tab 2, is it possible through CSS by manipulating divs and styles?

If there's a solution incorporating jQuery or JavaScript, please feel free to share.

Any assistance will be greatly appreciated. Thank you in advance.

javascript jquery html css

Answer 1

Answer №1

For complete details, please visit https://jqueryui.com/tabs/

<script>
  $(function() {
    $( "#tabs" ).tabs();
  });
</script>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Lorem Ipsum</a></li>
    <li><a href="#tabs-2">Dolor Sit Amet</a></li>
    <li><a href="#tabs-3">Consectetur Adipiscing</a></li>
  </ul>
  <div id="tabs-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam turpis non dignissim accumsan. Vestibulum auctor ultricies nulla, in tristique mauris laoreet vel. Phasellus eget massa suscipit nisi rutrum mattis eu nec tortor.</p>
  </div>
  <div id="tabs-2">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut volutpat varius libero at condimentum. Mauris ut interdum velit. Sed sit amet urna vitae mi rhoncus feugiat eget non sem.</p>
  </div>
  <div id="tabs-3">
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin quis purus lectus. Donec commodo sapien nec placerat pulvinar. Pellentesque lobortis lorem sed nunc ullamcorper porttitor. Aenean consequat eleifend justo, eu hendrerit lectus vulputate vitae.</p>
    <p>Curabitur fringilla gravida bibendum. Fusce sagittis elementum risus. Aliquam erat volutpat. Integer pharetra metus id tincidunt molestie. Morbi tempus enim vel felis facilisis laoreet. Duis imperdiet, elit nec vestibulum pellentesque, justo neque blandit quam, varius cursus est lacus quis ex.</p>
  </div>
</div>

Answer 2

For complete details, please visit https://jqueryui.com/tabs/

<script>
  $(function() {
    $( "#tabs" ).tabs();
  });
</script>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Lorem Ipsum</a></li>
    <li><a href="#tabs-2">Dolor Sit Amet</a></li>
    <li><a href="#tabs-3">Consectetur Adipiscing</a></li>
  </ul>
  <div id="tabs-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam turpis non dignissim accumsan. Vestibulum auctor ultricies nulla, in tristique mauris laoreet vel. Phasellus eget massa suscipit nisi rutrum mattis eu nec tortor.</p>
  </div>
  <div id="tabs-2">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut volutpat varius libero at condimentum. Mauris ut interdum velit. Sed sit amet urna vitae mi rhoncus feugiat eget non sem.</p>
  </div>
  <div id="tabs-3">
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin quis purus lectus. Donec commodo sapien nec placerat pulvinar. Pellentesque lobortis lorem sed nunc ullamcorper porttitor. Aenean consequat eleifend justo, eu hendrerit lectus vulputate vitae.</p>
    <p>Curabitur fringilla gravida bibendum. Fusce sagittis elementum risus. Aliquam erat volutpat. Integer pharetra metus id tincidunt molestie. Morbi tempus enim vel felis facilisis laoreet. Duis imperdiet, elit nec vestibulum pellentesque, justo neque blandit quam, varius cursus est lacus quis ex.</p>
  </div>
</div>

Answer 3

Answer №2

U have the option to utilize:

<div class="container">
  <h3>Tabs</h3>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul></div>

Answer 4

U have the option to utilize:

<div class="container">
  <h3>Tabs</h3>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul></div>

Answer 5

Answer №3

Implementing Jquery UI tabs can greatly enhance user experience on your website. It provides a straightforward method for organizing content and offers the flexibility to customize the appearance using either prebuilt styles or your own CSS.

Answer 6

Implementing Jquery UI tabs can greatly enhance user experience on your website. It provides a straightforward method for organizing content and offers the flexibility to customize the appearance using either prebuilt styles or your own CSS.

Answer 7

Answer №4

You should definitely check out the MetroUI for a fresh experience.

For an example of its usage, take a look here!

<div class="tabcontrol" data-role="tabControl" data-open-target="#frame_3_2">
    <ul class="tabs">
        <li class="active"><a href="#frame_3_1">Tab 1</a>
        </li>
        <li class=""><a href="#frame_3_2">Tab 2</a>
        </li>
        <li class=""><a href="#frame_3_3">Tab 3</a>
        </li>
    </ul>
    <div class="frames bg-grayLight">
        <div class="frame" id="frame_3_1" style="display: block;">1</div>
        <div class="frame" id="frame_3_2" style="display: none;">2</div>
        <div class="frame" id="frame_3_3" style="display: none;">3</div>
    </div>
</div>

Answer 8

You should definitely check out the MetroUI for a fresh experience.

For an example of its usage, take a look here!

<div class="tabcontrol" data-role="tabControl" data-open-target="#frame_3_2">
    <ul class="tabs">
        <li class="active"><a href="#frame_3_1">Tab 1</a>
        </li>
        <li class=""><a href="#frame_3_2">Tab 2</a>
        </li>
        <li class=""><a href="#frame_3_3">Tab 3</a>
        </li>
    </ul>
    <div class="frames bg-grayLight">
        <div class="frame" id="frame_3_1" style="display: block;">1</div>
        <div class="frame" id="frame_3_2" style="display: none;">2</div>
        <div class="frame" id="frame_3_3" style="display: none;">3</div>
    </div>
</div>

Answer 9

Answer №5

Please take a look at this example on JSFiddle: FIDDLE

Custom Tabs in HTML

<!--custom tab-->
<div class="tab"> <a target="1" class="active">HOME</a>
 <a target="2">PERSONAL</a>
 <a target="3">EDUCATIONAL</a>

</div>
<div class="details" id="link1">Home details goes here</div>
<div class="details" id="link2" style="display:none;">Personal details goes here</div>
<div class="details" id="link3" style="display:none;">Educational details goes here</div>

Jquery Code

$(".tab a").click(function () {
        $(".tab a").removeClass('active');
        $(this).addClass('active');
        $(".details").hide();
        var target = $(this).attr('target');
        $("#link" + target).show();
    });

Answer 10

Please take a look at this example on JSFiddle: FIDDLE

Custom Tabs in HTML

<!--custom tab-->
<div class="tab"> <a target="1" class="active">HOME</a>
 <a target="2">PERSONAL</a>
 <a target="3">EDUCATIONAL</a>

</div>
<div class="details" id="link1">Home details goes here</div>
<div class="details" id="link2" style="display:none;">Personal details goes here</div>
<div class="details" id="link3" style="display:none;">Educational details goes here</div>

Jquery Code

$(".tab a").click(function () {
        $(".tab a").removeClass('active');
        $(this).addClass('active');
        $(".details").hide();
        var target = $(this).attr('target');
        $("#link" + target).show();
    });

Answer 11

Answer №6

Here is the solution I devised:

    $('#tabs li a').click(function() {
       $('#tabs li a').removeClass("selected_tab");
       $(this).addClass("selected_tab"); 
    });

#tabs {
    list-style:none;
    display:block;
    overflow:hidden;
    margin:0;
}

#tabs li {
    float:left;
    margin-right:0.5em;
    border: 1px solid black;
    border-bottom:0;
}

#tabs li a {
    display:block;
    padding:0.3em;
    color:#000;
    text-decoration:none;
    border-bottom: 1px solid #000;
}

.selected_tab {
    border-bottom: 1px solid #fff !important;
}

#tab_content {
    width:100%;
    border-top:1px solid #000;
    margin-top:-1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
    <li><a class="selected_tab" href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
</ul>
<div id="tab_content">asdsda</div>

Answer 12

Here is the solution I devised:

    $('#tabs li a').click(function() {
       $('#tabs li a').removeClass("selected_tab");
       $(this).addClass("selected_tab"); 
    });

#tabs {
    list-style:none;
    display:block;
    overflow:hidden;
    margin:0;
}

#tabs li {
    float:left;
    margin-right:0.5em;
    border: 1px solid black;
    border-bottom:0;
}

#tabs li a {
    display:block;
    padding:0.3em;
    color:#000;
    text-decoration:none;
    border-bottom: 1px solid #000;
}

.selected_tab {
    border-bottom: 1px solid #fff !important;
}

#tab_content {
    width:100%;
    border-top:1px solid #000;
    margin-top:-1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
    <li><a class="selected_tab" href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
</ul>
<div id="tab_content">asdsda</div>

Webpage featuring tabs aligned horizontally

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

A PHP drop-down menu maintains a fixed position

What could be the reason for the counter not being incremented when the button is clicked

The webpage does not display the updated information from the controller after the Ajax call

What is the best way to initiate a local Node.js server specifically when launching a desktop Electron application?

Tips for transferring input field values through the href attribute in HTML?

What causes Spyscroll to be impacted by Collapse in Bootstrap 5?

Utilize Google Chrome Developer Tools to interact with the "Follow" buttons on the webpage by clicking on them

Is it possible to send array data in a jQuery AJAX call using the GET method?

What if we started using PT as the standard unit for measuring fonts and element size?

Tips for creating multiple diagonal lines with CSS and HTML

Customizing a toggle checkbox in Bootstrap 5: A guide to personalization

Preserve data across all pages using sessions

Arrange a cluster of CSS table cells onto a fresh line

Jquery and prototype are at odds with each other

Attempting to collapse the offcanvas menu in React Bootstrap by clicking on a link

What is the default method for automatically disabling drop down fields?

Activate an action only upon closing the page

Using VBA and Selenium to access iframes within HTML with the #document tag

Blurry font rendering occurs when an element is scaled using CSS

Tips for creating visually appealing tables in ReactJS