Write a function that uses jQuery Ajax to load a link instead of a button. Similar...

Write a function that uses jQuery Ajax to load a link instead of a button. Similar to this example.

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_load

But then it designates which chunk of text is shown based on which link is clicked based on id's. For example;

Pseudocode:

loaded file "txtfile.html" contains

<body>

id = red

<p> *chunck of text* <p>

id = blue

<p> *chunk of text* <p>

id = green

<p> *chunk of text* <p>

</body>

Do this but with links with ids. So for example,

<main>

</main>

So If I click link 1, it load the chunk 1 (id = red ) , link 2 chuck 2 (id = blue), link 3 chunk 3 (id= green). All of this on the same page. So the link will prompt a paragraph on that webpage. Please provide comments so I can I can understand implementation. Thank you

Solutions

Expert Solution

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){//whten the document gets ready
            $('#red1').hide()//hides the chunk of text whose id is red1, .hide is a jquery method
            $('#blue1').hide()//hides the chunk of text whose id is blue1, .hide is a jquery method
            $('#green1').hide()//hides the chunk of text whose id is green1, .hide is a jquery method
        $(red).on('click',function(){//when the link 1 is clicked i.e id red the chunk of text for the red id appears
            $('#red1').show()//shows the text , .show is a jquery method
        });
        $(blue).on('click',function(){//when the link 1 is clicked i.e id blue the chunk of text for the blue id appears
            $('#blue1').show()//shows the text , .show is a jquery method
        });
        $(green).on('click',function(){//when the link 1 is clicked i.e id green the chunk of text for the green id appears
            $('#green1').show()//shows the text , .show is a jquery method
        });
        });
    </script>
</head>
<body>
    <a id="red" href="#">link1</a>
    <br>
    <a id="blue" href="#">link2</a>
    <br>
    <a id="green" href="#">link3</a>
    <br>

    <div id="red1">chunk of text for red .</div>
    <div id="blue1">chunk of text for blue .</div>
    <div id="green1">chunk of text for green .</div>

</body>
</html>

venereology answered 1 year ago

Next > < Previous

Related Solutions

Write a JQuery Ajax program which can communicate with flicker to get the last pictures taken...

Write a JQuery Ajax program which can communicate with flicker to get the last pictures taken from any place or related to any concept(s) the user has written in a textbox, say Sydney, train. Some information associated with the image like its topic, time taken, and its link needs to be appeared with it. Develop a server which can serve the file you developed in 3-4. Add a plugin to the real jQuery library so that when you pass an...

Use HTML&CSS& JavaScript to: 3-4) Write a JQuery Ajax program which can communicate with flicker to...

Use HTML&CSS& JavaScript to: 3-4) Write a JQuery Ajax program which can communicate with flicker to get the last pictures taken from any place or related to any concept(s) the user has written in a textbox, say Sydney, train. Some information associated with the image like its topic, time taken, and its link needs to be appeared with it. 3-5) Develop a server which can serve the file you developed in 3-4. 3-6) Add a plugin to the real jQuery...

Write a function in C that uses the Merge Sort sorting algorithm with arrays. The function...

Write a function in C that uses the Merge Sort sorting algorithm with arrays. The function must not be void and must output type int* i.e. it must take the form: int* merge_sort(int a[], int n) where a[ ] is the input matrix and n is the size of the matrix. You may use an auxiliary functions such as "merge." The returned array should be sorted using merge_sort and should not modify the array that was input (a[ ] ).

#Python program using loop instead of numpy or pandas. Write a function to enter n student...

#Python program using loop instead of numpy or pandas. Write a function to enter n student scores from 0 to 100 to represent student score, Count how many A (100 - 90), B(89-80), C(79-70), D(69-60), F(<60) We will use numpy array OR pandas later for this problem, for now use loop Invoke the function with 10 student scores, show the result as follow: Test Enter 10 scores Enter a student score: 99 Enter a student score: 88 Enter a student...

Assume that struct Node{ int item; Node* link; }; Write function void list_remove(NodePtr& prev_ptr);...

Assume that struct Node{ int item; Node* link; }; Write function void list_remove(NodePtr& prev_ptr); The function will remove the node after the node pointed by prev_ptr. c++

Assume that struct Node { int item; Node* link; }; typedef Node* NodePtr; 1. Write function...

Assume that struct Node { int item; Node* link; }; typedef Node* NodePtr; 1. Write function void list_head_insert(NodePtr& head, int entry); The function should insert a new Node, in which entry is the value of attribute item, in front of the linked list that is pointed by head. 2. Write function void list_head_remove(NodePtr& head); The function will remove the first node from the linked list that is pointed by head. 3. Write function NodePtr list_search(NodePtr head, int target); The function...

Write a function that takes a person’s first and last names as input and (a) uses...

Write a function that takes a person’s first and last names as input and (a) uses lists to return a list of the common letters in the first and last names (the intersection). (b) uses sets to return a set that is the intersection of the characters in the first and last names. (c) uses sets to return the set that is the symmetric difference between the first and last names. please write in python program

Write a Python program which uses a function to calculate the perimeter of a rectangle. a...

Write a Python program which uses a function to calculate the perimeter of a rectangle. a function named volume to calculate the volume of a cylinder volume = 3.14 x radius x radius x height .b function named volume to calculate the volume of a cuboid volume = Length x width x ht Write a Python Program to calculate the sum of all odd numbers for 2 to 20 using a for loop. 4. Write statements that assign random integers...

In R studio Write a function that takes as an input a positive integer and uses...

In R studio Write a function that takes as an input a positive integer and uses the print() function to print out all the numbers less than the input integer. (Example: for input 5, the function should print the numbers 1,2,3,4 { for input 1, the function should not print a number.) Use the lapply function, do not use any of the loop commands in your code.

Write a Python program that uses function(s) for writing to and reading from a file: a....

Write a Python program that uses function(s) for writing to and reading from a file: a. Random Number File Writer Function Write a function that writes a series of random numbers to a file called "random.txt". Each random number should be in the range of 1 through 500. The function should take an argument that tells it how many random numbers to write to the file. b. Random Number File Reader Function Write another function that reads the random numbers...

Subjects