Incorporate external HTML content into a master file's div by utilizing various menu items with just a single JavaScript command

Here is the code snippet to load a div from abc.html into the master.html div named whatis_content. This functionality is intended to be applied to all menu items.

<div id="submenu">
<div id="subnav" >
        <ul>

    <li id="subone"><a href="abc.html" data-target='content2'>Definitions</a> </li>

    <li id="subtwo"><a href="abc.html" data-target='content3'>History</a></li>

        </ul>
</div>

<script src="jquery.js"></script>
 <script type="text/javascript">
 $(function(){
     $("#subnav ul li a").click(function(e){
         e.preventDefault()
         $('#whatismt_content')
         .load($(this).attr('abc.html') + ' #' + $(this).attr('data-target'));
      });
  });
  </script>

This section contains the external HTML content for abc.html

<html>

<head>
<link rel="stylesheet" type="text/css" media="all" href="whatis.css" />
 </head>
 <body>
  <div id="content2"><p>BAH BLAHA BH;AHABHBAKBAHBAhtml </p></div>

Some additional content can be found below:

<div id="#whatismt_content">

</div>

Answer №1

Make sure to implement the following code adjustments:

$(function(){
    $("#subnav ul li a").click(function(e){
        e.preventDefault();
        var url = $(this).attr('href') + ' #' + $(this).attr('data-target');
        $('#whatismt_content').load(url);
    });
});

Remember not to replace ' #' with '#', simply copy and paste the exact code provided above.

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

Refresh information in AngularJS controller

I am currently working on a straightforward AngularJS script that is designed to retrieve data from a socket.io event and then integrate it into the ng template. Below is the JavaScript code I have written for this purpose: // Socket.io logic: var message ...

Loading background images in CSS before Nivo slider starts causing a problem

I've been struggling with preloading the background image of my wrapper before the nivo-slider slideshow loads. Despite it being just a fraction of a second delay, my client is quite particular about it -_- After attempting various jQuery and CSS tec ...

Trouble with displaying a CSS background image in Google Chrome on the Three.js birds demo

My website displays a background image in both Safari and Firefox, but for some reason Google Chrome is not showing it. I am unsure why this is happening. Do you have any insights on what I might need to adjust? renderer = new THREE.CanvasRenderer(); ren ...

standards for matching patterns (such as .gitignore)

Throughout my experience, I have utilized various tools designed to search a codebase for specific files and then carry out operations on those files. One example is test libraries that identify all the necessary files for execution. Another common tool is ...

Cross origin requests for AngularJS 1.2 are limited to HTTP protocols only

Is it possible to set up an Angular app for external access? I'm currently using a factory. Just a note, I have my app hosted on localhost but making requests to a server within the same network. angular.module('demoApp.factories', []) ...

function embedded in velocity.js chain

How can I effectively execute this code? I keep encountering various errors. After the sequence is completed, I want to incorporate an additional function. I am utilizing jQuery in conjunction with velocity.js $(".close").click(function(){ var my ...

Is there a way to create an animation for changing .text in response to an on click event?

I'm currently developing a simple calculator that increases a variable when a button is clicked, displaying the updated value in a div. Each click on the 'amount-upwards' button adds 200 to the displayed number. Below is the jQuery code I a ...

How should white space be managed in Bootstrap 4 cards when incorporating responsive column classes - wrap elements inside divs or apply classes directly?

In Bootstrap 4, when applying a responsive column class like "col-sm-8" directly to a "div" with the class "card", whitespace is added between the card border and content. This can be seen in the highlighted yellow area in the image below. https://i.sstat ...

Interactive window allowing the user to closely examine code

Hey guys, I need your help with something Is there a way (PHP / jQuery) that allows me to zoom in on my code? Similar to how lightbox works for images. I specifically want to zoom in on dynamic code while using Yii's CListView. I'm thinking of ...

Having trouble getting text alignment to work properly in Internet Explorer?

I'm attempting to align my "li" elements in a row so that I can display three images side by side with text below them, similar to a product catalog view. While everything looks good in Chrome, Internet Explorer is only aligning everything to the left ...

Swapping link positions with jQuery

Is it possible to rearrange links using jQuery? Under the navigation menu, there will be content div for each tab. The selected link should always be positioned next to the first "sixrevision" link. The code snippet is shown below: <ul id="crumbs" ...

Refresh Bootstrap modal with Ajax update

I have implemented a modal for user profiles on my website. When the "Edit Profile" button is clicked, I want to populate the fields with existing data using Ajax. However, as I am new to Ajax, I am facing difficulties in making it work. Here is the struc ...

The call signatures for `node-fetch -- typeof import("[...]/node-fetch/index")'` are not properly defined

Originated from this source: https://github.com/node-fetch/node-fetch#json ... my personal code: const fetch = require('node-fetch'); async function doFetch() { const response = await fetch('https://api.github.com/users/github'); ...

Guide on generating a video thumbnail using JavaScript Application

Searching for a way to easily create a thumbnail from a video for uploading alongside the video itself to a server? I've been looking for JavaScript libraries to simplify the process without much luck. The scenario involves the user selecting a video ...

Extracting data from a nested JSON array within an AngularJS template

Here is some JSON data: { "tracks": [ { "album": { "released": "2013", "href": "spotify:album:3qGeRY1wt4rrLIt1YuSwHR", "name": "The Marshall Mathers LP2 (Deluxe)", "availability": { ...

Chrome's autofocus feature not functioning properly with Angular 10

I'm facing an issue with autofocus shifting to the login id field after displaying and announcing an incorrect login id and password message on VOICE OVER/talk back. Ensuring that my application is compliant with ADA and 508 regulations, it's es ...

In JavaScript, eliminate any links with empty href attributes and substitute them with text only

I attempted to implement this code snippet: $('a[href=""]').each(function(){ var linkText = $(this).text(); $(this).after(linkText); $(this).remove(); }); I'm uncertain if my syntax is correct. Can someone provide assistance, p ...

TypeScript Generic Functions and Type Literals

Everything seems to be running smoothly: type fun = (uid: string) => string const abc: fun = value => value const efg = (callback:fun, value:string) =>callback(value) console.log(efg(abc, "123")) However, when we try to make it generic, we e ...

The specified property type 'url' is not recognized on the provided 'Event' type

I came across the error message below [ts] Property type 'url' does not exist on type 'Event'. any This is the TypeScript (JavaScript) code snippet that I am using document.addEventListener("deviceready", onDeviceReady, false); ...

When you use the useState object in NextJS, the context object may appear to be empty

I've encountered an issue while trying to pass a context object in NextJS that uses data from a useState hook. Strangely, the state variable and setState functions are undefined when consumed. It's puzzling because substituting a simple variable ...