Tips on activating two HTML buttons simultaneously

I tried to implement clickable tabs by following a tutorial. I created both horizontal and vertical tabs. However, I want to have both buttons active at the same time. For example, if any of the horizontal buttons is active (number less than 6), then the first vertical button (number 6) should also be active, and vice versa. I attempted to add a class to achieve this, but the active classes were not being removed properly.

tablinks[6].className = tablinks[6].className.replace("", " active");

How can I make this functionality work smoothly?

Here is the complete code snippet:

...
javascripthtmlcssbuttontabs

Answer №1

It appears that the goal is to emphasize the first horizontal button for any active vertical buttons, and the first vertical button for any active horizontal ones. The following code should achieve this:

if(number <6){
  links[6].classList.add('active');
} else {
  links[0].classList.add('active');
}

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

Loading routes directly in Angular 2

I've encountered an issue with my Angular application where navigating to certain routes results in an error. The two routes in question are: http://localhost:8080/ /* Landing page */ http://localhost:8080/details/:id /* Result page */ For instance, ...

javascriptangularangular-routing

Utilize Page.evaluate() to send multiple arguments

I am facing an issue with the Playwright-TS code below. I need to pass the email id dynamically to the tester method and have it inside page.evaluate, but using email:emailId in the code throws an undefined error. apiData = { name: faker.name.firstNa ...

javascriptnode.jstypescriptplaywrightwebautomation

I am unable to log the response, but I can view it in Postman and the network tab

Currently, I am working on setting up a register feature with a specific endpoint. The challenge I am facing revolves around handling validation responses from the backend. For instance, if I attempt to register with a username that is less than six charac ...

javascriptvue.jsaxios

What is the best approach to simultaneously update an array using multiple threads in a Node.js environment?

Hey there, I'm trying to figure out how to make changes to the same array using 2 worker threads in Node.js. Can anyone help me with this? My issue is that when I add a value in worker thread 1 and then try to access it in worker thread 2, the second ...

javascriptnode.jsmultithreadingworker-thread

Updating REST API: Sending a PUT request without requiring all data to be included in json format

I have a controller set up for updating user data. The controller can accept up to 4 values. I am wondering if it is possible to only update the name field when sending data to this route, leaving the rest of the fields unchanged (and not empty). Should ...

javascriptnode.jsexpress

Guide on aligning a division within another division?

Included below is my HTML code: <div id="background_div"> <img id="background_img" src="images/background.jpg" alt="dont matter"> <i class="material-icons">perm_identity</i> <div id="dropdown"> <ul id=" ...

htmlcss

What is the best way to eliminate the white border from my website's code?

If you'd like to see the code in action, check out my JSFiddle html, body { height: 100%; } #background { height: 100%; background: url(http://phosproject.com/wp-content/themes/phos_theme/images/7.jpg); no-repeat center cente ...

htmlcss

ReactJS: Dealing with issues in setting a dynamic index for the setState key

I have been attempting to utilize setState within a for loop using index in the following manner: for (var i = 0; i <= 9; i++) { this.setState({ location_option[i]: resourceData.location_option+i, location_option[i]_type: resourceData.locatio ...

javascriptreactjs

place another ionic3 button adjacent to the existing one

I was looking to position a button next to another one, rather than below it <ion-row> <span *ngIf="dado.status == 0" style="margin-left: 50%"> Pending </span> ...

cssionic-frameworkionic3

Divs aligned horizontally with uniform height and vertical divider separating them

Seeking a method to create side by side, equal height divs (without resorting to table layout) with a single vertical line separating them. Attempted using flex container per row but the vertical line is fragmented which is not ideal... What would be the o ...

htmlcss

What is the best way to display a particular JavaScript variable in an HTML document?

Is there a way to display the value of a Javascript variable in an HTML form, such as showing it on the screen? Below is my JavaScript code: <script type="text/javascript"> var howLongIsThis = myPlayer.duration(); </script> The variable howL ...

javascripthtml

I seem to be facing some issues while trying to create an avatar bot on discord.js

I'm trying to create a command for my bot that shows the user's avatar, but I keep running into an issue: DiscordAPIError: Cannot send an empty message at RequestHandler.execute (C:\Users\Pooyan\Desktop\PDM Bot Main\n ...

javascriptnode.jsdiscorddiscord.js

Interactive Web interface, ASP.NET

Before we dive into the current question, I recommend checking out my previous query for additional context. The main inquiry now is centered around the possibility of creating a clickable cell within an asp.net Table. Alternatively, is there a way to ge ...

c#asp.netbuttonweb-controls

Issue with loading controllers in route files [Node.js]

I've encountered an issue while trying to include a user controller into my routes for a node js app. Everything was working fine until suddenly it started throwing an error message. I've thoroughly checked the code for any potential issues but s ...

javascriptnode.jsexpressroutesrequest

Iterate through JSON and dynamically populate data

My goal is to dynamically populate content by iterating through JSON data using jQuery. First, an Ajax request is made Then the data is looped through to create HTML tags dynamically A div container with the class "product-wrapper" is created for each J ...

javascriptjqueryjsonajaxforeach

Serve an HTML file with CSS/JS directly from the server disk to the client's browser

I'm currently facing a challenge that involves securely rendering and serving HTML files (along with CSS, JS) from the local disk on the server to a web application running in the client's browser. APPLICATIONS A front-end web app is built usi ...

htmlreactjsasp.net-coreasp.net-web-apireact-admin

Stretch out single column content vertically in bootstrap for a uniform look

I've been struggling to make multiple buttons vertically stretch to fit the container, but I can't seem to remember how I achieved this in the past. I have experimented with various options outlined on https://getbootstrap.com/docs/4.0/utilities/ ...

javascripthtmlbootstrap-4

Mysterious pop-up notification in jQuery

When I run the code below, instead of receiving "Hello" in the alert box, I am getting an undefined message. Could you please take a look and correct any errors? jQuery tutorial <input type="text" id="name" value="Hello"> </body> ...

javascriptjqueryhtml

What could be causing my buttons to not line up properly?

My buttons are refusing to line up horizontally for some unknown reason. I can't figure out what the issue is. They are all set to display as inline-block elements. The first image shows a website with the correctly aligned buttons, while the second o ...

htmlcss

Converting a CSV string into an array only when there is a line break in the body

Need help to convert a CSV string into an array of array of objects. Struggling with handling \n in the incoming request, causing issues with splitting and code errors. The string format includes messages enclosed in ". "id,urn,title,body,ri ...

javascriptarraysregexcsvobject