I'm working on a page in a Node Web app with a subnav that looks like this:
Here's the vanilla HTML for it:
<div class="col-md-8">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Comments</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
Is there a way for me to create live links (e.g. Comments) on those tabs without having to render a whole separate route and EJS template? To me, a process like that would be more efficient and DRY than creating separate templates for each link in the subnav.
Any help would be greatly appreciated. Thanks!
Related
I have been trying to link html pages created on bootstrap without success. The buttons don't even click out so it's not like I get taken to another page with an error message. Just nothing. But today I observed something that might help someone more savvy than me identify the problem.
So, I'm trying to link other pages on the index.html (as an example, the services page).
Instead of taking me to "https://chozeqfarms.dashnexpages.net/services/" it looks like it wants to take me to https://chozeqfarms.dashnexpages.net/index/services.html, which I observe when hovering over the service button.
My code snippet for the navigation bar is below, and the href looks regular to my untrained eyes. But I must be doing something wrong, please what could be wrong and how do I fix it?
<div class="row navbar-row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 navbar-container mynav">
Chozeq Farms
<nav class="navbar navbar-full">
<div class="collapse navbar-toggleable-md" id="tmNavbar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="trainings.html">Trainings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#tmNavbar">
☰
</button>
</div>
</div>
So I am a beginner in angular and I have to simply make a navbar.I have my bootstrap loaded in the .json file and it looks like this:-
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
whereas my code looks like this:-
<ul class=" nav navbar-nav navbar-right">
<ul class="dropdown-menu">
<li >
<a class="nav-link" href="#">Save Data</a>
</li>
<li >
<a class="nav-link" href="#">Fetch Data</a>
</li>
</ul>
</ul>
</div>
</div>
</nav>
`
Output is :-
my save data and fetch data are not appearing on right.what is the reason?
Just replace "navbar-right" with "ml-auto".
But still things are wrong with your code apart from "navbar-right".
It should be -
<ul class="navbar-nav ml-auto">
<li >
<a class="nav-link" href="#">Save Data</a>
</li>
<li >
<a class="nav-link" href="#">Fetch Data</a>
</li>
</ul>
I am familiar with the tutorial you are working with, so I guess you are creating a dropdown menu, this should be the complete code for it-
<ul class = "navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
Manage
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Save Data</a>
<a class="dropdown-item" href="#">Fetch Data</a>
</div>
</li>
</ul>
These existing questions might help -
Bootstrap NavBar with left, center or right aligned items
ml-auto is not pushing navbar links to the right
Firstly I am very new to Flask. I created a templates folder and moved all the html files there. Now i created a static folder and moved all my js files, images and css files there. Now in my index.html, I have navigation links as follows,
<div class="collapse navbar-collapse tm-nav" id="navbar-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link tm-nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link tm-nav-link" href="/services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link tm-nav-link" href="/about.html">About</a>
</li>
</ul>
</div>
Now in my app.py for page navigation I am doing something like below. When I open http://127.0.0.1:5000/ in browser, I can only see the index.html. But when I click on services or about it says "404 Not found. The requested URL was not found on the server." Please help what am I doing wrong.
from flask import Flask, render_template, Response, request, redirect, url_for
app = Flask(__name__)
#app.route("/")
def index():
return render_template('index.html')
#app.route("/services")
def services():
return render_template('services.html')
#app.route("/about")
def about():
return render_template('about.html')
I see the following in the command prompt.
You need to read about routing in flask here
You need to call the function attached to the URL with url_for or you can also put the direct URL there. For example /services.
<div class="collapse navbar-collapse tm-nav" id="navbar-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link tm-nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link tm-nav-link" href="{{url_for('services')}}">Services</a>
</li>
<li class="nav-item">
<a class="nav-link tm-nav-link" href="{{url_for('about')}}">About</a>
</li>
</ul>
</div>
I have a tab list, like the following:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="info_generali-tab" data-toggle="tab" href="#info_generali" role="tab" aria-controls="info_generali" aria-selected="true">Informazioni principali </a>
</li>
<li class="nav-item">
<a class="nav-link" id="moduli_lavorazione-tab" data-toggle="tab" href="#moduli_lavorazione" role="tab" aria-controls="moduli_lavorazione" aria-selected="false">Moduli Lavorazione</a>
</li>
Actually, if I click on a single tab, the url does not change. But If, ad example, I want to redirect the second tab (when click on) to the following link: /prova_uno ???
Correct your existing code will not change address, it will show a named anchor "#info_generali" or "#moduli_lavorazione".
If you want one of those tabs to not switch to a tab but instead load a new page then remove the data-toggle and set the target href to the page you wish to open:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="info_generali-tab" data-toggle="tab" href="#info_generali" role="tab" aria-controls="info_generali" aria-selected="true">Informazioni principali </a>
</li> <!-- This one will display the tab-->
<li class="nav-item">
<a class="nav-link" id="moduli_lavorazione-tab" href="/prova_uno" role="tab" aria-controls="moduli_lavorazione" aria-selected="false">Moduli Lavorazione</a>
</li> <!-- This one will navigate to URL /prova_uno -->
</ul>
So to recap, to make one of your tab formatted navigation links open a new page instead of display a tab:
Remove the data-toggle
Set the URL in href
I have tried the following code,
<ul class="nav nav-tabs">
<li class="nav-item" id="web1Tab"><a class="nav-link active" data-toggle="tab" id="w1" href="link_to_website_1">Website1</a></li>
<li class="nav-item" id="web2Tab"><a class="nav-link" data-toggle="tab" id="w2" href="link_to_website_2">Website2</a></li>
</ul>
It did look just like as I expected, however href doesn't work. On the other hand, if I remove the data-toggle="tab" part then href's work properly but active tab doesn't change. I guess that, href in this case only supports inner linking? I am not sure. The code looks very simple but I was unable solve it.
Can you try surrounding your entire list item with a href?
<ul class="nav nav-tabs">
<a style="display:block" href="your_url1_here">
<li class="nav-item" id="web1Tab">Website1</li>
</a>
<a style="display:block" href="your_url2_here">
<li class="nav-item" id="web2Tab">Website2</li>
</a>
</ul>