Develop Reference

adding rel="external" to every link

Hi I need to add rel="external" to every link () on my site is this possible?
so far i have tried $(".content a").attr("rel","external”);
I would add them manually but it is a 1000 page site and don't really want to code it on every link
thanks in advance

If you want it on all your links then you have to iterate through all of them and change that attribute
$(function () {
$('a').each(function () {
$(this).attr('rel', 'external');
});
});
If your intent is to change every link within the element with class content then what you have should properly change it just wrap it in the function
$(function () {
$('.content a').each(function () {
$(this).attr('rel', 'external');
});
});
Inspect the links in this jsfiddle to see that the attr has been added to those existing links
http://jsfiddle.net/4d06xb0x/

Multiple .active classes for navigation with jQuery

I have a very simple page that uses jQuery to hide and show content. I have 3 links, and 3 divs related to those 3 links. When you click one of the links that div get displayed. The jQuery script also adds a .active class to the link so I can show what link is currently active.
My problem is that I need to have 3 different .active classes, one for each link, so they can all have a different background image when it's active. Here is the jQuery code that runs it all:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('.link').click(function(e) {
e.preventDefault();
// Remove any active classes:
$('.active').removeClass('active');
$(this).addClass('active');
// Hide all the content:
$('.content').fadeOut();
$('.logo').fadeOut();
// Show the requested content:
var content = $(this).attr('rel');
$('#' + content).fadeIn();
});
});//]]>
</script>
I couldn't figure out how to create a jsfiddle, so I have a link to the dev page here: http://agoberg.tv/kiosk/index.html

I figured it out. I added 3 classes in the css, one for each link. Then I tweaked the jQuery to this:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
// Catch all clicks on a link with the class 'link'
$('.link').click(function(e) {
// Stop the link being followed:
e.preventDefault();
// Get the div to be shown:
var content = $(this).attr('rel');
// Remove any active classes:
$('.activediv1').removeClass('activediv1');
$('.activediv2').removeClass('activediv2');
$('.activediv3').removeClass('activediv3');
// Add the 'active' class to this link:
$(this).addClass('active' + content);
// Hide all the content:
$('.content').fadeOut();
$('.logo').fadeOut();
// Show the requested content:
$('#' + content).fadeIn();
});
});//]]>
</script>

Tabs java scripts with HTML

I have a tabs java scripts, but there is no default page.
I want to open the site to chose a page as a default tab.
Please help me
$(document).ready(function(){
$("#tabs a").on("click", function(e){
e.preventDefault();
var html = $(this).attr('href');
var htmlurl = 'html/'+html;
// update to the newest tab
$("#tabs a").removeClass("active");
$(this).addClass("active");
// set the new page content
$("#content-wrap").hide().load(htmlurl, function(){
$(this).fadeIn(400);
});
});
});

Your problem doesn't seem to be clear to me, hovewer these lines didn't make sense.
// update to the newest tab
$("#tabs a").removeClass("active");
$(this).addClass("active");
In these lines , you refer to $("#tabs a") and remove the class and by using this statement , again you re adding the class.

Switch active class when navigation links clicked jQuery

I'm trying to add jQuery to a website so when the link to the next page in the nav menu is clicked, then "active" class is switched to the "active" or current page. The "active" class is also set initially to the home page. Additionally, it's a website using Bootstrap so I was wondering if something was conflicting with my jQuery. Seems simple enough and my code works somewhat. It removes the active class from the Home page and briefly flashes on the next tab, but it does not stay "active." Here's the jQuery:
$(".nav li").click(function() {
$('li').removeClass('active');
$(this).addClass("active");
});
Any thoughts on what I may be doing wrong? Thanks in advance.
Andrew

I had a similar problem and wrote the following script:
var _urlpath = $(location).attr('pathname').split('/').pop();
$('#menu > li').each(function(){
var _this = $(this);
var _str = _this.find('a').attr('href');
_str !== _urlpath ? _this.removeClass('active') : _this.addClass('active');
});
It's fairly simple: filter the url path name, store it in a variable, and then most importantly, when a new page is loaded, loop through all the li's and try and match the url hash (I don't know the exact terminology), hash in the li > a's .
Alas, there might be a better way of doing this.

How can I create an active tab effect in Jquery depending on the page I'm on?

There are many tutorials that show you how to create an active tab effect in a navigation bar by fetching the # from the url.
This is great if you are linking to the same page, but what if all your links are on different pages. Is there a way using Jquery to fetch the url and make the tab active?
The following example gives the specific tab a class "active":
var tabs = $('ul.tabs');
tabs.each(function(i) {
//Get all tabs
var tab = $(this).find('> li > a');
tab.click(function(e) {
//Get Location of tab's content
var contentLocation = $(this).attr('href') + "Tab";
//Let go if not a hashed one
if(contentLocation.charAt(0)=="#") {
e.preventDefault();
//Make Tab Active
tab.removeClass('active');
$(this).addClass('active');
//Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
}
});
How do I modify this to work with links to other pages within my site? Here is the html:
<ul id="nav" class="tabs">
<li>Home</li>
<li>About</li>
<li>Demo</li>
<li>Where</li>
<li>Contact Us</li>
</ul>
The above jquery only works for #tab1, #tab2 etc, how do I make the tab active depending on the current page name? Sorry if this is a little unclear, it's quite hard to explain!

On the load of the page you can check the 'window.location' object for what page is being displayed, and then set the 'active' class to the corresponding link:
$(document).ready(function () {
//iterate through your links and see if they are found in the window.location.pathname string
var loc_href = window.location.pathname;
$('#nav a').each(function () {
if (loc_href == $(this).attr('href')) {
$(this).addClass('active');
}
});
});
NOTE: that the loc == $(this).attr('href') line looks to see if the href values for the links exactly match the window.location.pathname string.

location.href
Will return the URL of the current page, so you could change your if statment to something like -
if (location.href.indexOf(contentLocation) != -1) {
Which will check to see if the link of the clicked href is contained in the current page's URL. You'd obviously have to change this logic to suit your own needs.