I have a question when developing a website.

Asked 2 years ago, Updated 2 years ago, 83 views

I'm going to do a web-related project to study. The site I want to implement basically needs the following features, but I'm not sure what technology to use. I couldn't think of an exact keyword, so googling was actually very vague. The functions I want are as follows.

-When moving to a specific link, the header and footer are fixed, but only the rest of the content is partially updated

-The function of printing multiple windows within one page like a single window and closing one window when the close button is pressed

I made a simple picture with the hope that you understand the question.

web html javascript

2022-09-21 22:17

3 Answers

- Header and footer are fixed when moving to a specific link, but only the rest of the content is partially updated

There are many ways. Let me introduce one jsp has a directive called include. It's a way to apply the contents of another page to the current page. How to use it

<%@include file="URL of files to be included"%>

If you put the tag above in the current page, you will be able to call "URL of the file to be included" and include it in the current page. You can include pages in the header area and footer area in each page in the same way as above.

-The function of printing multiple windows within one page like a single window and closing one window when the close button is pressed

There is also a way to capture the full screen with css by displaying a modal window.


2022-09-21 22:17

Header and footer are fixed when moving to a specific link, but only the rest of the content is partially updated

You can use iframe.

The function of printing multiple windows within one page like a single window and closing one window when the close button is pressed

I don't know if you're talking about windows or simple areas. If you mean a simple area, you can implement dividing layers with div tags and blowing up the area with JavaScript.


2022-09-21 22:17

- Header and footer are fixed when moving to a specific link, but only the rest of the content is partially updated

I don't recommend this feature to the iframe web standard.

To explain in HTML and JAVASCRIPT (+ jQuery),

HTML

<nav>
    <a href="index.html" class="active" >Home</a>
    <a href="html5.html">HTML5</a>
    <a href="css3.html">CSS3</a>
    <a href="javascript.html">JavaScript</a>
</nav>
<section id="content">
    <div class="container">
     // Output content here
    </div>
</section>

JavaScript

$(function(){
    $('nav a').on('click', function(e) {
        e.preventDefault(); // Cancel link default behavior
        var url = this.href;

        $('nav a.active').removeClass('active'); // Remove current link activation
        $(this).addClass('active');

        $('#cotent .container').remove(); // Remove previous page contents
        $('#content').load(url + ' #content').hide().fadeIn('slow'); 
          // Get the #content part from the new page and add it.
    });
});

-The function of printing multiple windows within one page like a single window and closing one window when the close button is pressed

I think you're talking about the modal window function. The "close button" function and... I think it will come out if you search modal window on Google. Or you can try the Bootstrap framework.


2022-09-21 22:17

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.