Building and connecting div containers in HTML

I am looking to display two div tags (div1 and div2) side by side on a single HTML page. In div1, I want to include 2 anchor tags (Create and Insert). For div2, I aim to create 2 tab divs (tab1 and tab2). The goal is to link the Create anchor to tab1 and the Insert anchor to tab2. Can anyone assist with this setup?

.container {
width: 80%;
height: 200px;
margin: auto;
padding: 10px;
}
.one {
width: 15%;
height: 200px;
float: left;
}
.two {
margin-left: 15%;
height: 200px;
}



<section class="container">
  <div class="one">
    <a href="tab1">Create</a>
    <a href="tab2">Insert</a>
  </div>
  <div class="two">
    <div class="tabs">
      <div id="tab1">
        <button class="tablinks" onclick="cpp">C++</button>
        <button class="tablinks" onclick="java">Java</button>
         <div id="cpp" class="tabcontent">Create in C++</div>  
         <div id="java" class="tabcontent">Create in Java</div>
      </div>
      <div id="tab2">
        <button class="tablinks" onclick="cpp">C++</button>
        <button class="tablinks" onclick="java">Java</button>
          <div id="cpp" class="tabcontent">Create in C++</div>  
          <div id="java" class="tabcontent">Create in Java</div>
      </div>
     </div>
  </div>
</section>

Here is an example of how I would like my tabs to look

Answer №1

This code should be useful

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">home</div>
    <div role="tabpanel" class="tab-pane" id="profile">profile</div>
    <div role="tabpanel" class="tab-pane" id="messages">message</div>
    <div role="tabpanel" class="tab-pane" id="settings">settings</div>
  </div>

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggles with z-index in pseudo elements

I'm facing an issue with positioning my pseudo element behind its parent element. I want the red box to appear in front of the blue box. #mobile-nav-icon { position: absolute; display: block; height: 92px; width: 93px; background-color: r ...

Steps for creating an HTML report using Intern JS

Our team relies on intern JS for automating functional tests, however we are facing difficulty in generating an html report. I attempted to use locvhtml as suggested by the Intern documentation (https://theintern.github.io/intern/#reporter-lcov), but unfo ...

Utilize the dropdown menu to load JSON data and dynamically update the content of a div section on a website

I have been struggling to find a way to load JSON data from a drop down menu into a div area and refresh it with new results. While I was able to display the data in the div area without the dropdown menu, I am facing difficulty in fetching the required da ...

How can I insert a item into an Array using JavaScript code?

My instructor set up an array in my JavaScript file that is off limits for me to modify. My task is to add new objects to it through code without directly manipulating the existing array. Here's a snapshot of what my array contains: const words = [{ ...

Exploring RESTful routing using ui-router

I am currently in the process of creating a small AngularJS application. I have created two separate views: one for displaying a list of all employees, called employeeListView, and another for showing detailed information about a specific employee, known a ...

Looking for a way to utilize JavaScript to extract data from a database? I'm currently utilizing jQuery autocomplete and seeking to exclusively search for values within the database

Currently utilizing jQuery autocomplete <script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags });}); </script> Any s ...

I need to obtain the URL pathname on a server component in Next.js version 13 - how is this achieved

I'm facing an issue with retrieving the pathname of a server component located in the app directory. Despite attempting to obtain it through window.location, I haven't been successful. Is there an alternative method I can use to achieve this? ...

Having trouble retrieving data from the MongoDB database using Node.js

Having trouble with data retrieval from MongoDb Successfully connected to MongoDb, but when using the find command, it should return an empty collection, yet nothing is being returned. What could be causing this issue and how can it be monitored through ...

Failed attempt to change background color using jQuery

Creating a new notification system where I need to highlight a specific comment once it has been scrolled to. I initially thought of implementing a background color change timeout, but I'm facing some issues with it... Check out this example: I hav ...

Ways to Customize <td> Elements Within a <table> Container

Currently, I am utilizing jsp along with css to style the <td> within the <table> tag. My desired code format is shown below: https://i.sstatic.net/WJjA8.png However, what I am currently receiving is: https://i.sstatic.net/bLyvd.png #beng ...

Encountering a 404 error while sending a session ID in a Post request using AngularJS

My services are hosted on a remote server, and I am consuming these services in a local AngularJS app. Everything works fine with REST requests that do not require a SessionID in the header. However, when I add the Session ID in the header, it does not wor ...

Learn the method to conceal rows within a table simply by toggling a button

I need a function that will hide the rows below a row with a header and button, and only reveal them when another row with a header and button is clicked. When one of the +/- buttons is clicked, it should hide or expand all the rows with data content. http ...

Inability to load a MySQL table using Ajax on the same webpage

I'm facing an issue where I want to load a table from mySql on the same page without getting redirected to another page. The user selects a date range, and upon pressing submit, it should appear in the designated div id tag. However, the functionality ...

Learn about ng-show in AngularJS

Is there a way to hide this tag if it doesn't have a subcategory? I tried using the condition item.length != 0 but it doesn't seem to be working properly. <multi-select-tree class="multiselectStyle groupStyle" data-input-model="ca ...

Interactive state for associated product within list without order

I am currently working on a project that involves an unordered list with separate list items. The menu design includes product images in the top list item and the corresponding product names in the list item below. I have successfully implemented a hover s ...

Issue with CORS on Next.js static files leading to broken links on version 10.1.4

Currently, my Nextjs application is fetching its static files from Cloudfront. During deployment, I upload the /static folder to S3. After updating to version 9, I encountered a strange problem where some of my CSS files are triggering a CORS error: Acces ...

The functionality of reordering columns, virtual scrolling, and resizing the grid in jqgrid are not functioning properly

Implementing jqgrid with Symfony to display a datagrid has been a challenging task for me. Thanks to Oleg's insightful response, many of the major issues have been resolved. Below is a snippet of my code: <link rel="stylesheet" type="text/css" ...

What is the reason behind receiving the error message "`Foo` only represents a type, but is being treated as a value here" when using `instanceof` in TypeScript?

As the creator of this code interface Foo { abcdef: number; } let x: Foo | string; if (x instanceof Foo) { // ... } Upon running this code, I encountered an error in TypeScript: 'Foo' is recognized only as a type and cannot be used a ...

What is the solution to having a div move along with window resizing without displacing adjacent divs?

After much effort, I still can't seem to get this working correctly. I've been playing around with a section named "RightExtra" and a div inside it called "RightExtraContent". My goal is to allow these two divs to move freely when the window is ...

Set up Vue.prototype prior to the component loading

In my Vuejs code, I am utilizing the plugins feature to define a global shared variable. Vue.use(shared) The shared variable is defined as follows:- export const shared = { config: getAppConfig() } shared.install = function() { Object.definePropert ...