Inject the HTML code into the div, toggle the menu, and flip the

Question

Inject the HTML code into the div, toggle the menu, and flip the

Seeking assistance to complete the JavaScript code for loading HTML pages into a specific div. The goal is to load page1, page2, and subsequent pages into the div with id="content". Any help will be greatly appreciated. Thank you!

Here is the jsFiddle link for this code

HTML

<div id="menu">
<nav>
<ul>
<li ><a  class="active" href="1.html" ><b>Page1</b></a></li>
<li ><a  href="2.html" ><b>Page2</b></a>

</li>                                        
<li ><a   href="3.html"><b>Page3</b></a>

...

CSS

nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}

...

JAVASCRIPT

$(document).ready(function(){
$('nav ul li a').click(function(){
   $('nav ul li a').removeClass('active');
   $(this).addClass('active');
});    
});

javascript jquery html css

Answer 1

Answer №1

If you want to display the contents of a file referenced in your href, you can utilize the .load() function. Extract the href property using .prop().

To prevent the default action, such as redirecting to another page, when clicking on anchors, you need to handle it.

Consider triggering this behavior during page load for the active navigation button with the class .active. To achieve this, add a filter and click trigger accordingly.

$(document).ready(function () {
    var $navAnchors = $('nav ul li a');
    $navAnchors.click(function (e) {
        var $this = $(this);
        e.preventDefault();
        $navAnchors.removeClass('active');
        $this.addClass('active');
        $('#content').load($this.prop('href'));
    }).filter('.active').click();
});

It's worth noting that I've stored the jQuery collection matching your criteria in a variable to avoid repetitive selections. This way, the search for elements matching nav ul li a occurs only once upon DOM load.

Answer 2

If you want to display the contents of a file referenced in your href, you can utilize the .load() function. Extract the href property using .prop().

To prevent the default action, such as redirecting to another page, when clicking on anchors, you need to handle it.

Consider triggering this behavior during page load for the active navigation button with the class .active. To achieve this, add a filter and click trigger accordingly.

$(document).ready(function () {
    var $navAnchors = $('nav ul li a');
    $navAnchors.click(function (e) {
        var $this = $(this);
        e.preventDefault();
        $navAnchors.removeClass('active');
        $this.addClass('active');
        $('#content').load($this.prop('href'));
    }).filter('.active').click();
});

It's worth noting that I've stored the jQuery collection matching your criteria in a variable to avoid repetitive selections. This way, the search for elements matching nav ul li a occurs only once upon DOM load.

Answer 3

Answer №2

Utilize the $.get method.

$(document).ready(function(){
    $('nav ul li a').click(function(e){          // when a nav link ('a' tag) is clicked...
        $('nav ul li a').removeClass('active');  // remove the css class "active" from any nav links.
        $(this).addClass('active');              // add the css class "active" to the one we clicked

        e.preventDefault(); // <-- important!    // prevent the page from navigating away
        var page = this.href;                    // get the url the link would normally go to
        $.get( page, function( data ) {          // in the background, get the content of the page for the link we have clicked
          $( "#content" ).html( data );          // load the content we have into the element with id "content"
        });
    });       
});

If you're experiencing an empty page upon initial loading, don't worry, it's normal. To display something on load, trigger the click event manually like this:

$('nav ul li a.active').click();                  // Get the nav link which has class "active", and fire the click() event.

... should solve the issue.

Please note that the Fiddle may not work well with AJAX functionalities.
Another point to consider - check out George's answer for a simpler alternative to this solution. :)

Answer 4

Utilize the $.get method.

$(document).ready(function(){
    $('nav ul li a').click(function(e){          // when a nav link ('a' tag) is clicked...
        $('nav ul li a').removeClass('active');  // remove the css class "active" from any nav links.
        $(this).addClass('active');              // add the css class "active" to the one we clicked

        e.preventDefault(); // <-- important!    // prevent the page from navigating away
        var page = this.href;                    // get the url the link would normally go to
        $.get( page, function( data ) {          // in the background, get the content of the page for the link we have clicked
          $( "#content" ).html( data );          // load the content we have into the element with id "content"
        });
    });       
});

If you're experiencing an empty page upon initial loading, don't worry, it's normal. To display something on load, trigger the click event manually like this:

$('nav ul li a.active').click();                  // Get the nav link which has class "active", and fire the click() event.

... should solve the issue.

Please note that the Fiddle may not work well with AJAX functionalities.
Another point to consider - check out George's answer for a simpler alternative to this solution. :)

Inject the HTML code into the div, toggle the menu, and flip the

Answer №1

Answer №2

Similar questions

Different ways to adjust the position of the popup dialog in Vuetify

Troubleshooting the sidebar pin-unpin problem using Jquery and CSS

Troubleshooting: jQuery is unable to fetch JSON encoded information from PHP script

What is the proper way to remove an item from a nested array in React using its index?

Preventing loss of context in jQuery ajax when mixing HTML/JS and opening a <script> tag

The click event in jQuery is being blocked by the use of "display:none

Searching for data within a nested schema using Mongoose

How can I retrieve the content from an iframe whenever its state is altered using jQuery?

Remove underscores from a project utilizing browserify

Customize the format of the date in X-editable

Retrieve the updated file name from the mini file upload form

Comparing Redux with passing state down to components as props from the top level of the application

Tips for traversing a list of elements that has become stale due to a webpage refresh

Having trouble getting the `transformItems` feature in React InstantSearch RefinementList to

How can the overflow:hidden be applied to the body after a specified height, rather than the height of the viewport

Switching from Wordpress to Django and completely revamping the website using only Django

Transform my Angular implementation to TypeScript programming

Make sure the 'card-title' is positioned directly before a div element

Customizing Material UI Components: Implementing the onChange Method

Dynamic SVG map with responsive design