Develop Reference

jQuery doesn't let me use href

jquery:
$(".container").on("click", function(e) {
e.preventDefault();
var currentBox = $(this).siblings(".map").toggleClass("active");
$(".map.active").not(currentBox).removeClass("active");
});
html:
Because of this i cant use href anymore.
I use the jqueryto show more links.

It appears that you're trying to use div's and p's like anchors (a). href is not a valid attribute of div or p.
If you're trying to store data in the div and p tags, use data-href="" in conjunction with window.open()
Based on the limited code provided, my guess is that you're trying to do something like this:
$(".container").on("click", function(e) {
e.preventDefault();
const $this = $(this);
$(".map.active").removeClass("active");
$this.siblings(".map").toggleClass("active");
let href = $this.attr("data-href");
// Open a new window
window.open(href);
// OR
// Navigate without opening new window
window.location.href = href;
});
Or, you could skip the jQuery all together an just use anchor tags as they're designed to be used.

You can use jQuery for get any attribute of elements. So if you want to use href, just do:
var new_location = $('a').attr('href');
So you can do anything by click on a tag and at the least redirect to href path by:
window.location.href = $(this).attr('href');
Note: $(this) point to current clicked a tag. So you have something like this:
$(".container").on("click", function(e) {
e.preventDefault();
var currentBox = $(this).siblings(".map").toggleClass("active");
$(".map.active").not(currentBox).removeClass("active");
window.location.href = $(this).attr('href');
});

Run function on active anchor

I'm new to jQuery and want to highlight div's if the div's anchor id is set.
I currently have this construct which only works on page load with an valid anchor attached.
$(document).ready(function(){
var divpost = window.location.hash.substr(1);
if($.isNumeric(divpost)){
$('#reply_' + divpost).css('background-color', '#EDA2FF');
}
});
This works only on page load with a set anchor. How can I make this more dynamic so the script executes whenever the anchor changes?

jQuery can hook into the hashchange event so you can do this:
$(window).on('hashchange', function(e){
var divpost = window.location.hash.substr(1);
if($.isNumeric(divpost)){
$('#reply_' + divpost).css('background-color', '#EDA2FF');
}
});

You can make it a function and call it with every update.
function updateAnchors() {
var divpost = window.location.hash.substr(1);
if($.isNumeric(divpost)){
$('#reply_' + divpost).css('background-color', '#EDA2FF');
}
}
Then call updateAnchors() when more anchors are loaded.

Onload bootstrap tab trigger

The active class isn't working and I've tried body On-load click trigger and obviously show tab using id and many other ways, however nothing seems to be working. I have hashed the URL to enable tabs to be linked individually in the search. Any help is much appreciated.
JS: to hash the URL and jump to tab
// jump to tab if it exists
if (location.hash) {
$('a[href=' + location.hash + ']').tab('show');
}
// add tab hash to url to persist state
$(document.body).on("shown.bs.tab", function(e){
location.hash = e.target.hash;
});
});
JS: To go to tab home (not working)
$("document").ready(function(){
$("#home").trigger("click");
});
HTML:
<div class="col-xs-5 col-md-2 nopadding">
<nav class="nav-sidebar">
<ul class="nav tabs">
<li class="lead3">Home </li>
<li class="lead3">tab1</li>
<li class="lead3"><a href="#tab3" data-toggle="tab" >tab3</a></li>
<li class="lead3"> Contact </li>
</ul>
</nav>
tab-pane:
<div class="tab-pane active fade text-style" id="home"> . .. </div>

What you expect from this line?
$("home").trigger("click");
I suppose Jquery can't find element here $("home"). You could evaluate it in console for check.
if you are going to find element with class 'home' or id 'home' then you should use $(".home") or $("#home") properly.

It looks like your Document Ready event doesn't work.
Try remove the quotes around the $("document").
A shorter method for this event is as follows:
$(function() {
});

I know that this is very late but I'd like to post my solution since this was something that I was stuck on as well. There's an important subtlety that I think is easy to miss. You want to trigger the click on the <a> tag inside the nav, not the actual panel. Remember you click on the tab not on the panel to trigger it into view. So to get the correct tab to show when the user navigates to /my/path#home you want to bind on the hashchange event and click the correct element. See https://stackoverflow.com/a/680865/5262119 for more info on binding to the hashchange event.
$(window).bind('hashchange', function(event){
var hash = window.location.hash;
// get the actual anchor tag that links to the panel
var $matchingAnchor = $('nav a[href^="' + hash + '"');
if ($matchingAnchor) $matchingAnchor.click();
});
And assuming you want to restrict this to trigger only a certain page then you can add a location check:
$(window).bind('hashchange', function(event){
var path = window.location.pathname;
var hash = window.location.hash;
var $matchingAnchor = $('nav a[href^="' + hash + '"');
var contextRegex = /my\/page/;
var correctPage = contextRegex.test(path);
if (correctPage && $matchingAnchor) $matchingAnchor.click();
});
I imagine you also want to make sure that clicks on the tabs update the hash in the URL window so bind to the tabs event:
$('nav a').on('click',function() {
var $a = $(this);
var hash = $a.attr("href");
window.location.hash = hash;
});
This would go inside your ready function. You will also have to make sure that the function that triggers the click happens when the page first loads.
Complete solution:
$(document).ready(function() {
// Declare clickback function
function triggerTabClick() {
var path = window.location.pathname;
var hash = window.location.hash;
var $matchingAnchor = $('nav a[href^="' + hash + '"');
var contextRegex = /my\/page/; // or whatever you want this to be
var correctPage = contextRegex.test(path);
if (correctPage && $matchingAnchor) $matchingAnchor.click();
}
// Trigger it when the hash changes
$(window).bind('hashchange', triggerTabClick);
// Trigger it when the page loads
triggerTabClick();
// Hook into click for tabs to make sure hash is updated on click
$('nav a').on('click',function(event){
event.preventDefault();
var $a = $(this);
var hash = $a.attr("href");
var window.location.hash = hash;
})
})

about change href value from the root not by click

Thanks in advance for helps
trying to create redirect page for external links
Here , i need to change href with class="external" from the root (recreate it) , not to create click event to open window with customized href
<a class="external" href="http://google.com">GOOGLE</a>
see this
$('a.external').click(function (e) {
e.preventDefault();
var target = e.target || e.srcElement;
if ($(target).attr('target') == "_blank") {
window.open("http://"+redirectpage+"?url=" +$(target).attr('href') , "_blank");
} else {
window.location = "http://"+redirectpage +"?url="+ $(target).attr('href'));
}
})
the above example if you copy the link by right click on
GOOGLE it will copy the original link http:// google .com
But
i want to convert the original link whatever , when i click to open this link OR when i copy it the result =
http://example.com/redirect.html?url=http://google.com/
the redirect page i use http:// example .com/redirect.html
contains this
html
<a id="gotoexternal" href="">go to external</a>
js
<script>
var query = window.location.search.substring(1);
query = query.replace("url=", "");
$('#gotoexternal').attr('href', query);
</script>

You have an extra closing parentheses in your window.location line.
Should be
window.location = "http://"+redirectpage +"?url="+ $(target).attr('href');

$('a.external').each(function () {
$(this).attr( 'href', "http://"+redirectpage +"?url="+ $(this).attr('href') );
$(this).removeAttr( 'target' ); //strip target _blank from links
});
This simply does a one time replacement of the url with the redirection url. It requires no onclick events and no messing with target or anything else. Unless there is some reason that you want to maintain the original url that you haven't mentioned, this should be the most straightforward way to achieve what you want.

You can use attr(attributeName,function) to modify the existing href
$('a.external').attr('href',function(_, oldHref) {
return "http://" + redirectpage + "?url=" + oldHref;
});
the target should be already set according to your code
You can also do this right in a click handler so the user can't see the changes when hovering links
$('a.external').click(function (e) {
this.href = "http://" + redirectpage + "?url=" + this.href;
});
Reference: attr(attributeName,function) Docs

form action url change depending on #tag

Is it possible to change a forms action Url with jQuery/js depending on a browser #tag?
The tabs are working correctly I just need the action to change as well.
Here is the tab js I am currently using, I am also using the jQuery Address Plugin also:
var QTABS = {
init: function () {
// attached onload and change event to address plugin
$.address.init(function(event) {
// first load, set panel
QTABS.setPanel(event);
}).change(function(event) {
// if the url changes, set panel
QTABS.setPanel(event);
});
},
// the core function to display correct panel
setPanel: function (event) {
// grab the hash tag from address plugin event
var hashtag = event.pathNames[0];
// get the correct tab item, if no hashtag, get the first tab item
var tab = (hashtag) ? $('.tabs li a[href=#' + hashtag + ']') : $('.tabs li:first a');
// reset everything to default
$('.tabs li').removeClass('activeTab');
$('.tab_container .tab_content').hide();
// if hashtag is found
if (hashtag) {
// set current tab item active and display correct panel
tab.parent().addClass('activeTab');
$('.tab_container .tab_content:eq(' + (tab.parent().index()) + ')').show();
} else {
// set the first tab item and first panel
$('.tabs li:first').addClass('activeTab');
$('.tab_container .tab_content:first').show();
}
if ($('.tabs').length)
{
// change the page title to current selected tab
document.title = tab.attr('title');
}
}
}
// Execute this script!
QTABS.init();

This is what i ahve used successfully
$("#myDelete").click(function(){
$('#myForm').attr("action", "accounttrandelete.php");
$("#myForm").submit();
return false;
});
$("#myEdit").click(function(){
$('#myForm').attr("action", "accounttranedit.php");
$("#myForm").submit();
return false;
});
$("#myRec").click(function(){
$('#myForm').attr("action", "accounttranrec.php");
$("#myForm").submit();
return false;
});
$("#myUnRec").click(function(){
$('#myForm').attr("action", "accounttranunrec.php");
$("#myForm").submit();
return false;
});

Because I don't know where the form is and how you want to access it. If you want change the action url to do this:
$("form").attr("action", "Put your new Url here");
UPDATE:
$("#tag")..attr("action", "Put your new Url here");
If you want to use standard Javascript you can change as follow:
document.forms[0].action = "Put your new Url here";
Note: you can replace forms[0] by the name of your form.
UPDATE:
If you have a form with an id then its similar to above method call:
document.getElementById("tag").action = "Put your new Url here";