Guide on designing a navigation list with unique buttons that alter the displayed content based on the selected button

Question

Guide on designing a navigation list with unique buttons that alter the displayed content based on the selected button

As a newcomer to the world of programming, I have a basic inquiry that I hope you can assist me with.

I have successfully created a navigation list, but I am struggling to make it functional. For instance, if my navlist consists of 3 buttons: Home, About, and Contact Me, how do I ensure that clicking on each button changes the content on my webpage accordingly? In other words, how can I display different text or content when a user clicks on the About or Contact Me button?

I apologize for my lack of experience in this matter as a beginner, but any guidance you could offer would be greatly appreciated.

Thank you in advance for your assistance!

javascript jquery html css

Answer 1

Answer №1

In most cases, those "buttons" are actually links that are created using the anchor tag (<a>). The link destination is determined by the href attribute on the tag, which is a URL. This URL can either be absolute (http://example.com) or relative (about.html).

Here's an example of a link:

<a href="about.html">About</a>

When a user clicks on a link, the browser will navigate to the specified page in the href.

I suggest delving into any introductory HTML resources for a more comprehensive understanding.

If you absolutely need to use literal buttons (not stylized links), there are two methods you could employ:

Make the button a submit button and place each one within its own form. The page associated with the button is defined as a URL in the action attribute of the form:
```
<form action="about.html" method="GET">
    <input type="submit" value="About">
</form>
```
or
```
<form action="about.html" method="GET">
    <button>About</button>
</form>
```
(Using a <button> tag allows for more customized text on the button. Also, since the default type of a <button> is submit, explicit type="submit" isn't necessary.)
Add an onclick handler to the button. I advise against this for various reasons, including the fact that it won't work if the user doesn't have JavaScript enabled, although that scenario is rare.
```
<input type="button" onclick="location = 'about.html'" value="About">
```
or
```
<button type="button" onclick="location = 'about.html'">About</button>
```

Answer 2

In most cases, those "buttons" are actually links that are created using the anchor tag (<a>). The link destination is determined by the href attribute on the tag, which is a URL. This URL can either be absolute (http://example.com) or relative (about.html).

Here's an example of a link:

<a href="about.html">About</a>

When a user clicks on a link, the browser will navigate to the specified page in the href.

I suggest delving into any introductory HTML resources for a more comprehensive understanding.

If you absolutely need to use literal buttons (not stylized links), there are two methods you could employ:

Make the button a submit button and place each one within its own form. The page associated with the button is defined as a URL in the action attribute of the form:
```
<form action="about.html" method="GET">
    <input type="submit" value="About">
</form>
```
or
```
<form action="about.html" method="GET">
    <button>About</button>
</form>
```
(Using a <button> tag allows for more customized text on the button. Also, since the default type of a <button> is submit, explicit type="submit" isn't necessary.)
Add an onclick handler to the button. I advise against this for various reasons, including the fact that it won't work if the user doesn't have JavaScript enabled, although that scenario is rare.
```
<input type="button" onclick="location = 'about.html'" value="About">
```
or
```
<button type="button" onclick="location = 'about.html'">About</button>
```

Answer 3

Answer №2

Most scenarios will incorporate CSS as well. To display them all in a list format, you can include the following code in your HTML:

<ul class="navmenu">
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="contact-me.html">Contact Me</a></li>
</ul>

Furthermore, your CSS styling would be as follows:

<style>
ul.navmenu {
/* Insert your custom UL MENU CSS styles here*/
}
ul.navmenu li {
/* Insert your custom LIST CSS styles here*/
}
ul.navmenu li a {
/* Insert your custom LINK CSS styles here*/
}
</style>

If you want to modify the appearance of the buttons, you can research "CSS list style" for additional guidance. This should help you get started.

In order to make the buttons change content, you must create pages. For instance, you would need to create index.html (or index.php, or other page formats), about.html, and contact-me.html. These pages are necessary so that your links will navigate from one page to another when clicked.

Answer 4

Most scenarios will incorporate CSS as well. To display them all in a list format, you can include the following code in your HTML:

<ul class="navmenu">
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="contact-me.html">Contact Me</a></li>
</ul>

Furthermore, your CSS styling would be as follows:

<style>
ul.navmenu {
/* Insert your custom UL MENU CSS styles here*/
}
ul.navmenu li {
/* Insert your custom LIST CSS styles here*/
}
ul.navmenu li a {
/* Insert your custom LINK CSS styles here*/
}
</style>

If you want to modify the appearance of the buttons, you can research "CSS list style" for additional guidance. This should help you get started.

In order to make the buttons change content, you must create pages. For instance, you would need to create index.html (or index.php, or other page formats), about.html, and contact-me.html. These pages are necessary so that your links will navigate from one page to another when clicked.

Answer 5

Answer №3

For those just starting out in the world of web development, my suggestion would be to avoid creating a navbar from scratch. Instead, consider utilizing a framework like Twitter Bootstrap, which offers a pre-built navbar component.

Answer 6

For those just starting out in the world of web development, my suggestion would be to avoid creating a navbar from scratch. Instead, consider utilizing a framework like Twitter Bootstrap, which offers a pre-built navbar component.

Guide on designing a navigation list with unique buttons that alter the displayed content based on the selected button

Answer №1

Answer №2

Answer №3

Similar questions

Error occurred while retrieving JSON array using Jquery

Strategies for sending checkbox data to MySQL via AJAX and jQuery

HTML Backup Page

Finding a jQuery DOM element without using a loop

Tips for incorporating an if statement within a jQuery each loop

Error encountered in React: Unable to access property of splice as it is undefined

Below and above the number 10

Colorbox scalePhotos function malfunctioning

The power of ReactJS and the mysterious nature of 'this'

What is the best way to toggle the visibility of the answers to a question when the corresponding hyperlink is clicked, and how can the text on this hyperlink be updated dynamically using jQuery?

How can we ensure that an enum is accessible throughout the entire meanjs stack?

Display information in a table format by utilizing local storage with jQuery

Is there a way to display a date that is two days before the current date in a React date picker using only vanilla JavaScript

Switch up the text within the URL of the background image

What is the best way to make an element unclickable on an HTML page while still making it draggable using jQuery's draggable

Displaying dynamic data with Vue.js and Chart.js

Encountering a START_ARRAY token during a spring ajax call

Dealing with a Node and Express server can be tricky, especially when trying to proxy a POST request along with parameters. You might encounter the error

What steps can be taken to resolve a Mediasoup installation error in a Node.js environment?

Unlocking the Power of Global Variables in HTML Pages with JTemplate and jQuery