i have a home.vue component and inside the template i have multiple div’s with class names and ids and i have navigation links which i wanted to click and route to that certain div using the classnames or id’s is there anyway to do using vue-router ?
i tried out to use
<li><router-link to="#about" >About Us</router-link></li>
for routing it to #aboutus id of the div
but i cannot do it and i searched internet , didnt find any useful resource help me out .
check out the imgur image here
You don't need vue router for this. All you are doing is trying to scroll to a div on your page so why not try something like this:
<li>
<span>Go To</span>
</li>
and in your script:
methods: {
goToDiv() {
var elmnt = document.getElementById("yourId");
elmnt.scrollIntoView();
},
}
Related
I am designing a Squarespace site, so I do not have direct access to the HTML. I would like to add some CSS to the site's drop down menu system. And the way the menu system is setup, it does give not assign ID names, only class names. So, it has one DIV and within that one DIV, it has several SPAN classes. The problem is that all the folder SPANS are all named the same and all the HREF classes are all named the same. What I would like to happen for example, is that if the user clicks on a either "About Us," "Memstaff Team, or "Careers," I would like to add (not replace) a class named "currentFolder" to the "/about" HREF which is the SPAN right before it (which has a class name of "Header-nav-folder-title"). But I do not want to effect the other HREF that comes after, which also has the same exact CLASS name of "Header-nav-folder-title." I would also like to remove the class "currentFolder" when a user clicks on any of the other links so I can repeat the process. I am aware of Jquery's .closest() and .find() but do not know enough on how to use them properly.
<div class="Header-nav-inner">
<span class="Header-nav-item Header-nav-item--folder">
About
<span class="Header-nav-folder">
About Us
MEMStaff Team
Careers
</span>
</span><span class="Header-nav-item Header-nav-item--folder">
Job Seekers
<span class="Header-nav-folder">
Submit a Resume
MEMStaff Jobs
Referral Bonus</span>
</span>For Employers
Contact
</div>
$('a.Header-nav-folder-item').click(function() {
//Remove active class from all title elements
$('.Header-nav-folder-title').removeClass('active');
// Add class to correct title element
$(this).parent().siblings('.Header-nav-folder-title').eq(0).addClass('active');
});
// Remove active class when clicking on bottom two links
$('a.Header-nav-item').click(function() {
//Remove active class from all title elements
$('.Header-nav-folder-title').removeClass('active');
});
Here is some code that I think may solve your problem. You should set it to run whenever the page navigates (document load probably).
Note that this will only work if the page path exactly matches the link href.
// Get all of the folders
const folders = document.querySelectorAll('span.Header-nav-item--folder');
// Loop through the folders
for (const folder of folders) {
// Variable for if one of the folder contents is the current page
let childIsCurrent = false;
// Get all of the links in the dropdown
const links = folder.querySelectorAll('a.Header-nav-folder-item');
// Loop through the links
for (const link of links) {
// Compare the link href with our current path
if (link.href === location.pathname)
childIsCurrent = true;
}
// Find the folder title
const title = folder.querySelector('a.Header-nav-folder-title');
// Add or remove the class
if (childIsCurrent)
title.classList.add('currentFolder');
else
title.classList.remove('currentFolder');
}
I am using vuesax sidebar component and don't know how to updated the computed property getActive
I am on laravel 5.7 in a vue spa and the active class if dedicated by the computed property and it changes when you click on each link but not by what page you are on. I have tried using a vue router link to and manually set the class with the class-active property that is used for router links
<vs-sidebar-item to="/dashboard" index="1" icon="menu">
Dashboard
</vs-sidebar-item>
<vs-sidebar-item to="/orders" index="2" icon="all_inbox" >
Orders
</vs-sidebar-item>
https://i.gyazo.com/0053e00288c63e5c1eb1c77500d1a053.png
Right now if you click on the repective link it will change the active property but if you were to go to the url bar and change your page that way it will not be reflected in the navbar.
I fixed this by adding some custom logic to the afterEach function within the Vue Router.
router.afterEach((to,from) => {
// Clear all buttons
const btns = document.querySelectorAll('.vs-sidebar-item-active');
btns.forEach( el => {
el.classList.remove('vs-sidebar-item-active')
});
// Highlight correct button
var item = document.querySelector("div.page-" + to.name);
if (item) {
item.classList.add('vs-sidebar-item-active');
}
});
You need to add the appropriate class names to the vs-sidebar-items. Here I've got classes of page-*** to match the name of the route.
I'm using blade template, the template contains a navigation bar. it is something like this
<ul>
<li class="active">page1</li>
<li>page1</li>
<li>page1</li>
</ul>
Using jquery I can make the li element active once clicked.
Now the problem is when I click on the second link the page2 will be loaded and that page extends the same template so it will load it again and there then the 1st element will be active. The solution that I thought about is adding a div to each page to let me identify the page
<div class="type" data-type="page2"></div>
and when the page is loaded I set the selected li element depending on the page type.
I try this and it is working the only thing is that I don't think it is the perfect solution. Is there an other more simple way to solve this?
Thanks
I'd set a class on the html element to identity your page. That way you can have javascript as well as css react to what type of page you're on. Not that you need css in this particular example, but down the line use-cases might pop-up and then you already have a solution in place.
edit:
Adding class dynamically through a tiny script:
//script in specific page
<script>pagetype = "page2"</script>
//script as part of layout template shared between pages
<script>
$(function(){
$("html").addClass(pagetype);
})
</script>
In my opinion, a better solution would be detecting the current page with Request::segment() (or Request::is(), depending on the stucture of your URLs) method. Combine that with a View composer to avoid passing data to each view manually.
An example:
The view composer:
class PageComposer
{
public function compose($view)
{
$view->with('active', Request::segment(1));
}
}
The service provider:
class PageServiceProvider extends ServiceProvider
{
public function register()
{
View::composer('partials.header', 'PageComposer');
}
}
The part of the header file that is common to all your pages:
<ul id='pages'>
<li id='page1'>page1</li>
<li id='page2'>page2</li>
<li id='page3'>page3</li>
</ul>
The script that changes the active class:
<script>
$(document).ready(function () {
var activeLink = $('#{{ $active }}');
activeLink.addClass('active');
});
</script>
More information about this in Laravel 4 documentation:
Requests
View Composers
You can compare anchor href to pathname and then add style or assign class to correct anchor e.g
...
<li>Link</li>
...
$('a[href="'+window.location.pathname.split('/').pop()+'"]').css({ color: 'red' });
or
$('a[href="'+window.location.pathname.split('/').pop()+'"]').addClass('current');
How to highlight every link in main menu with a different color based on its current page ?
for example change the contact us link color to red in the main menu when the current page is contact us
and change the about us link color to orange in the main menu when the current page is about us and so on
You can use javascript to do this:
first, retrieve your current url path:
var pathname = window.location.pathname;
for example, return "/contact.html"
then you can use this value to detemine which item to be hilighted:
if(pathname == "/contact.html"){
document.getElementById("contact").addClass("hilighted");
}
and so on.
a:active : when you click on the link and hold it.
a:visited : when the link has already been visited.
If you want the link corresponding to current page to be highlighted, you can define some specific style to the link -
.current {
color: red;
background-color: #000000;
}
Add this new class .current only to the corresponding li (link), either on server-side or on client-side (using javascript/jquery).
With JQuery you could use the .each function to iterate through the linkswith the following code:
$(document).ready(function() {
$("[href]").each(function() {
if (this.href == window.location.href) {
$(this).addClass("current");
}
});
});
Depending on your page structure and used links, you may have to narrow down the selection of links like:
$("nav [href]").each ...
if you are using url parameters, it may be necessary to strip these:
if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...
This way you don't have to edit each page.
source
There are a lot of approaches, it's hard to say which is best without seeing your code.
You could use some Javascript on each page to add or change the class of your links.
For instance on your contact us page use a a script like
var contactLink = document.getElementById("contactUs");
contactLink.addClass("orangeLink");
You can add active class to the menu based on current page.
if you are in contact page then add active class to contact us menu, same for about us page, then do some css for that active class.
for example if you are in contact-us page then :-
<ul>
<li class="home">Home</li>
<li class="contact active">Contact Us</li>
<li class="about">About Us</li>
</ul>
Now do some css for that :-
.contact.active{
color : red;
}
.about.active{
color : orange;
}
It will worked for you.
I am working on a HTML template, but I cannot touch the HTML code, I can only work on CSS and JS files. So I cannot in any way edit the HTML code.
What I am trying to achieve is to put some links in active status when jQuery or Javascript recognizes that the current page URL is the same one of the link I want to put in active status, without editing the HTML code.
Is there a way to do it? I tried in many ways but with no luck.
Here is the HTML code ( Remember I cannot edit it ).
<span class="Tag_Nav_Aux">
Create Account
|
Login
|
My Cart
</span>
The jQuery or Javascript code should work on different links, other than the ones I reported above, since the HTML changes when the user is logged in or logged out.
So the jQuery should point the class Tag_Nav_Aux and add the Active class to any a tag it will find that has the link the same of the current URL.
You can do something like this. Your file name from the URL
var filename = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
After that get the anchor from the navigation and apply some class.
$("span.Tag_Nav_Aux a[href*="+filename+"]").addClass('active');
Here you have to write a CSS active class which will make that link to appear like an active link.
Try this script
jQuery(function($){
$('.Tag_Nav_Aux a').filter(function(){
return $(this).attr('href').toLowerCase() === window.location.pathname.toLowerCase();
}).addClass('active');
});
and create a CSS rule for
.Tag_Nav_Aux a.active{
// style you want the active link to have
}
$(document).ready(function() {
var url = window.location.href.toLowerCase();
$(".Tag_Nav_Aux a").each(function() {
var $this = $(this);
var href = $this.attr("href").toLowerCase();
if(url.indexOf(href) > -1) {
$this.addClass("active");
}
});
});
I think you need to check the current page url and assign a class to the item like to active.
I usually do putting class="active" based on current URL match with help of server side code.
But if you dont want server code you can do with help of JavaScript
var currentPage=window.location.href;
if(currentPage=="")
{
//logic to find and add a Class for the proper anchor tag
}