Develop Reference

remove and add class with javascript on page load issue

When i add or remove a class with javascript then reload the page ..
it wont work
I tried this code, and put it in on the header
<script>
$(document).ready(function() {
$('.boxAdRight').removeClass('boxAdRight').addClass('active');
});
</script>
and this is my HTML I want to remove the class boxAdRight and change it with .active class
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="data">
<div class="getData">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="servers">
<ul>
<li class="active"
id="s_0"onclick="getServer(this.id,0);">
<i class="fa fa-video-camera"></i> server1
</li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-12 fRight">
<div class="episodes boxAdRight">
<h2>episodes</h2>
<ul>
<li>
episode 1
</li>
<li class="active"> episode 2
</li>
</ul>
</div>
</div>
<div class="col-md-9 col-sm-8 col-xs-12 fRight">
<div class="boxVideos">
<div class="getCode"><iframe src="https://*******" scrolling="no" frameborder="0" width="700" height="430" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
thank you

As a first observation I would like to mention the fact that JQuery's removeClass function returns one or more space separated class names that should be removed. As a consequence, you should not apply addClass over the result of removeClass.
There might be other issues also in your code though...

Replace your .boxAdRight class with .episodes class and it'll work as you want.
<script>
$(document).ready(function() {
$(".episodes").removeClass("boxAdRight").addClass("active");
});
</script>

I believe that the order of the method calls should be
$('.boxAdRight').addClass('active').removeClass('boxAdRight');
In the original example $('.boxAdRight').removeClass('boxAdRight').addClass('active'); the selector .boxAdRight is being used, but then that class is being removed with .removeClass('boxAdRight'), so .addClass('active') is being called on a selector with no matching elements.

get it like that will solve it
$('.episodes').addClass('active').removeClass('boxAdRight');
in normal case yours too must work ?

You can also simplify this code by replacing of class instead of removing it.
$('.boxAdRight').className = 'active';
how to replace class HTML name with javascript

Using Javascript to change image to link

I would like to change an image on my website into a link using Javascript so that when users click the image they are redirected to a website. My html code and Javascript code are as follows. I tried mimicking what was mentioned in this thread but was unsuccessful (how to add a link to an image using jquery?).
The image I am trying to create a link for is http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg
Thank you for your help.
My Javascript code
jQuery('.profile-avatar.open-photo-swipe').wrap($('<a>',{
href: link2;
}));
My HTML code
<div class="profile-header">
<div class="container">
<div class="row">
<div class="col-md-12">
<div v-pre>
<a class="profile-avatar open-photo-swipe"
href="http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg"
style="background-image: url('http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-300x300.jpg')"
data-width="1024"
data-height="576"
>
</a>
</div>
<div class="profile-name" v-pre>
<h1 class="case27-primary-text">Offer 2</h1>
<h2>blag</h2>
</div>
<div class="cover-details" v-pre>
<ul></ul>
</div>
<div class="profile-menu">
<ul role="tablist">
<li class="active">
<a href="#_tab_1" aria-controls="_tab_1" data-section-id="_tab_1"
role="tab" class="tab-reveal-switch toggle-tab-type-main">
Profile </a>
</li><li class="">
<a href="#_tab_2" aria-controls="_tab_2" data-section-id="_tab_2"
role="tab" class="tab-reveal-switch toggle-tab-type-comments">
Comments
<span class="items-counter">0</span>
</a>
</li> <div id="border-bottom"></div>
</ul>
</div>
</div>
</div>
</div>
</div>

jQuery('.profile-avatar.open-photo-swipe')
This element is a link, not image:
<a class="profile-avatar open-photo-swipe"
href="http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg"
So use
jQuery('.profile-avatar.open-photo-swipe').prop('href', link2)

I would like a button to trigger a link using jquery/JavaScript

I have a nav-pills element incorporated in my web page, which works perfectly.
The li tag will have a class of "active" if I'm on that tab and will only have a class of "test" if I'm not currently on that tab.
What I'm also trying to do is have an additional button for next and previous, so if I'm on the "Menu 1" tab and I hit next, I can go back to the "Introduction" tab. I attempted to have the button trigger the link but it doesn't work.
<div class="card">
<div class="header">
<div class="col-sm-12 text-center">
<ul class="nav nav-pills center-pills">
<li class="active" id="first" class="test"><a id="link1" class="test" href="#home">Introduction</a></li>
<li class="test">Menu 1</li>
</ul>
</div>
</div>
<div class="content">
<div class="tab-content">
<!--first tab-->
<div id="home" class="tab-pane fade in active">
<h3>Introduction</h3>
<p>Random Text </p>
<button id="next-step" class="btn btn-basic">Next</button>
</div>
<div id="menu1" class="tab-pane fade in active">
<h3>Menu1</h3>
<button id="back-step" class="btn btn-basic">Back</button>
</div>
</div>
</div>
</div>
</div>
My JavaScript looks like:
$('#back-step').click(function(){
$('link1').trigger("click");
});
$(".nav-pills a").click(function(){
if ($('#first').hasClass('active')){
$('#first').addClass('test').removeClass('active');
}
$(this).tab('show');
});

It looks like there's a typo in your JavaScript. You're not targeting the #link1 id. Try $('#link1').trigger("click"); (note the hash).

dynamically load content when tab is active in mvc bootstrap tab-content

I am using bootstrap and ASP.NET mvc to create a web app. I am using partial views on each tab however right now all the data is coming in at the same time. I would like to call my partial to query and return data only when the tab is active. How can I do that?
<div>
<ul class="nav nav-tabs nav-justified">
<li class="active">Service</li>
<li>Instrument</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
#Html.Action("Index", "Controller1")
</div>
<div class="tab-pane fade" id="tab2">
#Html.Action("Index", "Controller2")
</div>
</div>
</div>

You would need to put a onClick event on your tabs, somthing like below should work for you
<ul class="nav nav-tabs nav-justified">
<li class="active" data-ref="1">Service</li>
<li data-ref="2">Instrument</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<div id="tabone"></div>
</div>
$(".nav-tabs li").click(function(){
var pageId = $(this).data('ref');
$.ajax({
url: url,
data: {pageId:pageId },
success: function(response){
if(pageId == 1)
{
$('#tab1').replaceWith(response);
}
else....
}
});
});

Try this Code
<div>
<ul class="nav nav-tabs nav-justified">
<li class="active">Service</li>
<li>Instrument</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
#Html.Action("Index", "Controller1")
</div>
<div class="tab-pane fade" id="tab2">
#Html.Action("Index", "Controller2")
</div>
</div>
</div>
<script>
$("#openTab1").on("click", function() {
$("#tab1").load('/Controller1/Index');
});
$("#openTab2").on("click", function() {
$("#tab2").load('/Controller2/Index');
});
</script>

Javascript Magic
ASP.net doesn't inherently come with that feature available. The method I would use would be to setup a url in your controller returning a partial viewand then have make an ajax request to that url to load it's content in to your web page. The method I described can be seen as an example Here
tdlr;
Make a partial view in your controller, and load it using ajax.

How to change active bootstrap tab with javascript

I have tried to change the active tab and failed to use the javascript onclick element correctly. Here's the code:
<ul class="nav nav-tabs" style="text-align: left;">
<li class="active">First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div class=“tab-content">
<div id="first" class="tab-pane fade in active">
Text
Second
Third
</div>
<div id="second" class="tab-pane fade in">
Text
</div>
<div id="third" class="tab-pane fade in">
Text
</div>
</div>
How could I be able to use the buttons to change the active tab to their associated id? Please advise.
Have a great day!

you may also use .tab('show') for more flexibility
https://codepen.io/jacobgoh101/pen/ALELNr
<button class="btn btn-primary" onclick="menu3()">go to menu 3</button>
javascript:
function menu3(){
$('[href="#menu3"]').tab('show');
}
Bootstrap documentation: https://getbootstrap.com/javascript/#tabs

You can trigger click on tab you want when click on your buttons
<ul class="nav nav-tabs" style="text-align: left;">
<li class="active">First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div class="tab-content">
<div id="first" class="tab-pane fade in active">
Text
<a class="btn btn-primary btn-lg" onclick="$('#second_tab').trigger('click')">Second</a>
<a class="btn btn-primary btn-lg" onclick="$('#third_tab').trigger('click')">Third</a>
</div>
....
</div>
here is a Demo

Here is your js
$('#submit').click(function (e) {
$('#myTab a[href=#tabs3-2k_tab2]').tab('show')
e.preventDefault()
});

I recommend the data attribute approach, is a clean solution and separate View from Controller code
go to menu 1
go to menu 2
javascript:
$('a[href="#btn-next"]').on('click', function(event){
event.preventDefault();
var tab = $(this).data('next');
$(tab).tab('show');
})

Updated on bootstrap5
<div class="tab-control" data-role="tab-control">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="frames">
<div class="frame" id="tab1">
//Content tab 1
</div>
<div class="frame" id="tab2">
//Content tab 2
</div>
</div>
</div>
var someTabTriggerEl = document.querySelector('#tab1');
var tab = new bootstrap.Tab(someTabTriggerEl);
tab.show();

Working example
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
$('button').addClass('btn-primary').text('Switch to Orange Tab');
$('button').click(function(){
$('#tabs a[href=#orange]').tab('show');
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<center><h6>Switching Among the Tabs</h6></center>
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Red </li>
<li>Orange</li>
<li>Yellow</li>
<li>Green</li>
<li>Blue</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
<button>Blue</button>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
<button>Blue</button>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
<button>Blue</button>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
<button>Blue</button>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
<button>Blue</button>
</div>
</div>
</div>
</div>

This is simple and works.
function do_something () {
$('#profile-tab').click();
}

If you are using Scala, refer to https://www.tutorialspoint.com/ngx_bootstrap/ngx_bootstrap_tabs.htm,
namely:
<tabset>
<tab heading="View">
<tab heading="Configuration" (selectTab)="showConfig()==true" [active]="showConfig()">`
</tabset>
(you need both selectTab and active)...
The click() solutions suggested by others are working, but are generating exception "Expression has changed after it was checked." so it seams a bad habit, even if the exception is not raised in production mode.
//bad code!
ngAfterViewInit() {
if (thisCreation){
document.getElementById("tabConfig-link").click();
}
}

I recommended this codes.
<div class="tab-control" data-role="tab-control">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="frames">
<div class="frame" id="tab1">
//Content tab 1
</div>
<div class="frame" id="tab2">
//Content tab 2
</div>
</div>
</div>
Add effects that you want in class attribute.