Instructions on how to automatically navigate to a different tab upon clicking an <a> element on a separate webpage, and subsequently display the designated tab on that

I have a button on my home page that, when clicked, should open a specific tab section on another page. The button is located on one page and the tabs are on a different page.

On the second page, I have multiple tabs but will only mention one here, which is the tab that needs to be opened when the button is clicked from the home page.

Page 1 - Home Page with Button

<p><a href="{{url('guide-specs').'#w1'}}" class="btn btn_readmore2">View Example Worksheet</a></p>

Page 2 - Tabs

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link " data-toggle="tab" href="#w1">Worksheet</a>
  </li>
  <div id="w1" class="container tab-pane fade"><br>
    <div class="container">
      <div class="row">
        <div class="col-12 col-sm-11">
          <p class="f-15 gry2">The primary use of this worksheet is to provide a detailed checklist that will facilitate precise development of specifications with drawings, to ensure that all parties are talking about the same type and quality of building.</p>
          <p>
        </div>
      </div>
    </div>
  </div>

Answer №1

The tabs UI implementation in this example might not be the most efficient.

However, if you still choose to use it:

  <script>
$(document).ready(function(){
  $(".btn_readmore2").click(function(){
    $("#w1").load("demo_test.txt");
  });
});
</script>

Alternatively, consider utilizing a more effective function like checking for visibility before executing actions.

if($("#w1:visible")){ write your show action code here }

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

Heroku is showing an Error R10 (Boot timeout) message, indicating that the web process was unable to bind to the designated $PORT within one minute of launching

Encountering an error while trying to deploy my first node project on Heroku. Here is the error message: 2020-09-29T04:24:09.365962+00:00 app[web.1]: production 2020-09-29T04:24:09.415266+00:00 app[web.1]: server is listening at port 40890 2020-09-29T04:24 ...

Slide your finger upwards to shut down the mobile navbar in bootstrap

Hey there, I'm currently developing a website using Bootstrap framework v3.3.4. I have a mobile navbar that opens when I click a toggle button, but I would like it to slide up to close the navigation instead. Here is an image showing the issue Do y ...

"Create dynamic web pages with multilingual support using HTML, JQuery, and nested

For my multilingual website, I wrote this simple JQuery code: (function() { var language, translate; translate = function(jsdata) { $('[tkey]').each(function(index) { var strTr; strTr = jsdata[$(this).attr('tkey')] ...

Tips on effectively integrating the onSelectChange() function with queries in ColdFusion 9 using Ajax

I currently have a dropdown menu that displays different choices for the user. I want the selected option to populate a text area based on the user's selection. The data is already stored in my database, and I need to be able to execute a query depend ...

Tips for accessing the FormControlName of the field that has been modified in Angular reactive forms

My reactive form consists of more than 10 form controls and I currently have a subscription set up on the valueChanges observable to detect any changes. While this solution works well, the output always includes the entire form value object, which includ ...

What is the process for accessing a URL using a web browser and receiving a plain text file instead of HTML code?

Hello there! I've created a simple HTML file located at that can display your public IP address. If you take a look at the code of the page, you'll notice that it's just plain HTML - nothing fancy! However, I'm aiming for something mo ...

Contrasting the uses of element(...) versus element(...).getWebElement() in Protractor

What is the advantage of using element(...).getWebElement() instead of element(...) when they both perform similarly? Why are there two different APIs for the same purpose? ...

Issue with opening mobile app from deep link in HTML email

My HTML form contains a deeplink that is submitted through the SendGrid API on nodeJS. After sending the email, users can view it but are unable to click on the deeplink. <!DOCTYPE html> <html> <head> ...

The justify-between utility in Tailwind is malfunctioning

Can someone help me figure out how to add justify-between between the hello and the user image & name? They are in different divs, but I've tried multiple ways without success. I'm fairly new to this, so any advice would be appreciated. This ...

hidden behind the frame is a drop-down menu

I am currently working on a website that uses frames. The topFrame.php contains a menu with drop-down submenus, while the main frame displays the website content. However, I am encountering an issue where the submenu in the topFrame is getting hidden beh ...

Angularjs scope's parent id

I'm looking to access or manipulate a scope's grandparent without making things overly complicated. Leveraging the controller as syntax, I can reference the parent controller like so: this.applicationCtrl.something with applicationCtrl > parent1C ...

Tips for executing specific javascript on small screens or mobile devices

I am currently in the process of developing a Vue web application that needs to be functional on all devices. I have certain code that should only run on small screens or mobile devices. Right now, I am using an if statement with $(window).width() to achie ...

Display the two values of an object pair using ng-repeat in AngularJS

I have an array of objects structured like this: myCtrl.siteNameLabels = myCtrl.actual.map(function (value, index) { return { actualSite: { actualSiteName : value, actualSiteData: myCtrl.tableData[index] }, ...

Optimal approach for reutilizing Javascript functions

After creating a simple quiz question using jQuery, involving show/hide, addClass, and tracking attempts, I am now considering how to replicate the same code for multiple questions. Would it be best practice to modify all variables in both HTML and jQuery, ...

Troubleshooting Issue with Jssor Slider in Internet Explorer 11 due to Relative Dimensions

Encountering an issue with the relative dimensions of the slider container in IE11 (Jssor 18.0). Here is the HTML structure: An outer div with specified absolute dimensions (width and height in pixels). An inner div, serving as the slider's contain ...

Guide to extracting and utilizing a JSON object received from the parent page

Hello, I've been searching online for quite some time and can't seem to find a solution to my question. If anyone could help, I would greatly appreciate it. Below is the code I am working with: <ion-content> ...

View the picture in a web browser

Currently, I am faced with the challenge of displaying an image that is stored in an MSSQL database created by another person. The column was originally of type IMAGE, but I converted it to varbinary(MAX) using Sequelize. Although I lost some data during ...

Every time a button is clicked on the interface, a new element or button will appear. This functionality is made possible through

Currently diving into a new React.js project as a beginner. I have a little challenge in the code snippet below - looking to add a button that displays "Hello World" every time it's clicked using setState. Can anyone guide me on enhancing the DisplayM ...

Troubleshooting Issue: Unable to Collapse Bootstrap Responsive Navbar Button with Custom CSS Modifications

I recently created a responsive HTML page using Bootstrap, then converted it to WordPress and made some custom CSS adjustments. In the original HTML version of the page, the navbar collapse button worked perfectly when the screen was resized. However, afte ...

Using jQuery to select and check the appropriate checkbox within a table cell

I have encountered an issue that can be found here. The problem arises when I try to click on a TD element and toggle the checkbox inside it. This works fine for checkboxes directly inside TD elements, but when there is a table nested inside a TD, the so ...