Tips for creating a hyperlink to a particular tab

Please click here for the demo

I am attempting to generate links like this

page1.html#section1, page2.html#section2
, but these links are not functioning correctly.

Relevant code snippet

function showSection( sectionID ) {
    $('div.section').css( 'display', 'none' );
    $('div'+sectionID).css( 'display', 'block' );
}
$(document).ready(function(){
    if (
        $('ul#verticalNav li a').length &&
        $('div.section').length
    ) {
        $('div.section').css( 'display', 'none' );
        $('ul#verticalNav li a').each(function() {
            $(this).click(function() {
                showSection( $(this).attr('href') );
            });
        });
        $('ul#verticalNav li:first-child a').click();
    }

});

Answer №1

Check out this discussion:

What to do when window.location.hash changes?

I can't claim ownership of this solution, but your answer can be found in that conversation (as mentioned in the comments too).

You'll need to create a function that monitors each hash change like this:

$(window).on('hashchange', function() {
  .. code ..
});

All recognition belongs to the individual from the related thread.

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

D3 circle packing showcases a concise two-line label text

I've browsed through the topics on this site, but none of the solutions provided worked for my issue. Is there a way to display text in two lines for long texts in D3 circle packing? The following code is what I am using to show labels on circles: c ...

Utilizing a Custom Validator to Compare Two Values in a Dynamic FormArray in Angular 7

Within the "additionalForm" group, there is a formArray named "validations" that dynamically binds values to the validtionsField array. The validtionsField array contains three objects with two values that need to be compared: Min-length and Max-Length. F ...

I attempted to apply vertical-align and color properties to the static_nav div, but they didn't have any effect. Could this be due to its placement within the header? What steps should I take to resolve this issue?

<!DOCTYPE HTML> <html lang ="en"> <meta charset = "utf-8" /> <head> <title>Sample Page</title> <link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" /> </head> <body> &l ...

Preventing users from entering negative values in an input type=number by implementing Angular FormControl Validators

Is there a way to prevent users from decrementing the value of an input field with type=number to a negative value? I am aware that we can use min=0 in the HTML input element, but I'm looking for another method using Angular FormControl Validators. S ...

Tips on transferring a selected value from a dropdown menu to a getJSON URL

I am working on a dropdown menu containing the names of Surahs from the Quran. How can I pass the value of the selected item in the dropdown to a function? $.getJSON("http://api.globalquran.com/surah/2/quran-simple?key=api_key&jsoncallback=?", { ... ...

choose a value from the drop-down menu in real-time

Below is a dropdown list I am working with: <select name="selSS1" id="select_value"> <option value="val0">sea zero</option> <option value="val1">sea one</option> <option value="val2">sea two</option> ...

Gradually reveal element upon div initiation

Need help with creating a function to fadeIn when the div wrapper starts to show. Similar to this link. In my attempts using offset of a certain div, the function triggers inconsistently across different resolutions. However, in the example link provided, ...

How can I make an element slide onto the page without any animation using jQuery when the page

I have a div element on my webpage that I can collapse using a button with jQuery. I want this div to be collapsed by default when the page loads. To achieve this, I used window.onload event: window.onload=function(){$("#upgradeInfoCollapse").slideToggle( ...

Waiting for the API endpoint to be posted on the development tool

After creating login credentials in the database, I am facing an issue when trying to use them to log in. The network response for the /api/login endpoint remains stuck on a pending request. Upon checking the response, it seems that the payload data intend ...

Using @font-face alongside jQuery's height() function to handle dynamic AJAX content

My dilemma is similar to the one described in this question, where I am attempting to achieve equal height for elements while utilizing @font-face: jQuery working out wrong height, due to @font-face Initially, using $(window).load worked, but now I am fac ...

How to send a JSON error message from PHP to jQuery

I am facing an issue where I want to display an error message if the username and password are incorrect. I have been trying to solve this since yesterday but I can't figure out what's wrong. Every time I receive an error and it displays the erro ...

Comparison between Static HTML controls and Razor HTML helpers.Static HTML controls are

Just starting to learn ASP.NET MVC and I've noticed that it generates controls like @Html.TextBoxFor(x => x.Name) which resemble server-side controls in web forms. Since browsers only understand HTML, these controls need to be converted to HTML bef ...

Tips for incorporating captions into a slideshow

I've been experimenting with different methods to include captions in my slideshow, but haven't had much success. I simply want to add a div at the bottom of each image. Do I need to modify my script or should I consider adding something else? H ...

What is the proper way to convert the date and time of Friday, October 23, 2015 at midnight into a specific format for a datetime string?

I'm currently utilizing the bootstrap datetimepicker and I need to retrieve the datetime and then add days to it. var get_date_time = Friday, October 23rd 2015, 12:00:00 am I want to format get_date_time to "Oct 25 2015 12:00:00 am", but I'm u ...

Can a correctly typed text alter the image?

I am working on a feature where the image changes when the user enters the correct text, indicating that it was typed correctly. However, I am facing an issue where if the first two characters are entered correctly but the third one is not, the image still ...

What is the method for including an echo inside a URL call?

I am attempting to achieve the following: <?php include_once ("includes/'<?php echo $mymodule1; ?>'.php"); ?> Previously, I tried using: <?php include_once ("includes/'.echo $mymodule1.'.php"); ?> Unfortunately, it ...

Is there a way to dynamically expand and collapse all table rows, with the latest row always remaining visible, using pure JavaScript?

I have a form input field where I enter data. The entered data is then displayed in a table as a new row, with the most recent entry at the top. What I want to achieve is to show only the newest row in the table and hide all other rows. When I hover over ...

Passing variables by reference in JavaScript allows for direct manipulation of

Is there a JavaScript equivalent to PHP's method of passing variables by reference? [PHP]: function addToEnd(&$theRefVar,$str) { $theRefVar.=$str; } $myVar="Hello"; addToEnd($myVar," World!"); print $myVar;//Outputs: Hello World! If possible, h ...

How can I restrict Material UI TextFields with input type = file to only allow pdf files?

Is there a way to restrict users from uploading anything other than PDF files using input type=file? I've researched about using the accept attribute but seems like it's not compatible with material UI text fields. Is there an alternative soluti ...

"Error Encountered When Trying to Parse JSON in Javascript Due

After retrieving JSON data from a remote URL, I encountered the following: {"myitems":[{"NAME":"JOHN"},{"NAME":"MICHAEL"},{"NAME":"CATTY"},{"NAME":"DAVID"}]} I am trying to parse this in JavaScript using: JSON.parse(mydata); However, I keep encounterin ...