Develop Reference

Why does content disappear when I click on an empty area?

There is a .services section, which contains a .sidebar with a list-menu. When you click on one menu item from the menu in. The sidebar on the right in the .services-info block shows content that matches the content of the item, but there is a problem: when I click on an empty area, the content of the block in .services-info disappears. What is the problem?
PS I am using Swiper JS for full page flipping of blocks and this is the first slide block
Code jsfiddle.net/1ohrf34p/
Site cn76553.tmweb.ru
Selected item
enter image description here
Clicked on any blank space
enter image description here
document.querySelector('ul.sidebar-menu').addEventListener("click", function(e) {
e.preventDefault();
let clickedId = e.target.parentNode.id;
let divs = document.querySelectorAll('div.services-info>div.content>div');
divs.forEach((el) => {
el.classList.remove('visible');
el.classList.add('invisible');
});
let targertEl = 'div.services-info>div.content>div.' + clickedId;
document.querySelector(targertEl).classList.add('visible');
});
.invisible {
display: none;
}
.visible {
display: block;
}
<div class="swiper-slide services-first-slider">
<div class="services-bg">
<div class="wrapper">
<div class="content">
<div class="sidebar">
<h3>Наши услуги</h3>
<ul class="sidebar-menu">
<li id="business-card">Сайт-визитка</li>
<li id="landing">Landing page</li>
<li id="market">Интернет-магазин</li>
<li id="corp">Корпоративный сайт</li>
<li id="bitrix">1C Битрикс</li>
<li id="advertising">Контекстная реклама</li>
<li id="seo">SEO оптимизация</li>
<li id="promotion">Продвижение в соц. сетях</li>
<li id="marketing">Контент-маркетинг</li>
</ul>
<ul class="sidebar-nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="services-info">
<div class="content">
<div class="business-card">Сайт-визитка</div>
<div class="landing invisible">Landing page</div>
<div class="market invisible">
<div class="services-info-title">
Созданные экспертами «Inter-web» сайты интернет-магазинов имеют функциональность, необходимую для успешной онлайн-торговли.
</div>
<p>Что входит в нашу работу:</p>
<div class="services-info-block">
<ul>
<li>+ Подготовка технического задания</li>
<li>+ Разработка прототипа</li>
<li>+ Верстка макета</li>
<li>+ Интеграция дизайна</li>
</ul>
<ul>
<li>+ Написание уникальных текстов</li>
<li>+ Сбор семантики</li>
<li>+ Тестирование и запуск</li>
<li>+ Подключение веб-аналитики</li>
</ul>
</div>
<div class="services-info-footer">
<a class="order" href="#">Сделать заказ</a>
<a href="#" class="details next">
<span>Узнать подробнее</span>
<div class="button-next"></div>
</a>
</div>
</div>
<div class="corp invisible">Корпоративный сайт</div>
<div class="bitrix invisible">1C Битрикс</div>
<div class="advertising invisible">Контекстная реклама</div>
<div class="seo invisible">SEO оптимизация</div>
<div class="promotion invisible">Продвижение в соц. сетях</div>
<div class="marketing invisible">Контент-маркетинг</div>
</div>
</div>
</div>
</div>
</div>
</div>

That is because you get an error:
Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': 'div.services-info>div.content>div.' is not a valid selector.
You are trying to get the id of an element, which doesn't have it, and besides that, you are trying to reach it by wrong selector, using ".idOfElement" instead of "#idOfElement".

trying to have a jQuery, javascript, click function which changes an image to the related id

I have a vertically divided page, down the middle. On one side I have a list of restaurants, I would like when/if a name of a restaurant is clicked on, an image of the restaurant and a description appears inside a div that is on the other side of the divided page.
I am trying to do this with jQuery and have it so when there is a click event the id of the name clicked is stored in a variable and then that variable corresponds to a picture which will then be displayed in the div.
I am sure there is simpler way to do this, and I am drawing a blank on this, or if someone could help me in doing it in the way I am trying, it would be greatly appreciated. All insight is welcomed and thank you.
This is new to me. I know i could do it by going through each id and having its own function call but I am trying to be less repetitive and have a function that works for all. thanks
JS CODE :
$('.hover').click( function(){
var iD = $(this).attr(id);
$('.pictureofeats').removeAttr("id");
$('.pictureofeats').attr('id', iD);
});
HTML CODE :
<div class="row drinks brunchpic">
<img src="pics/buffalofood.png" width="200px"/>
<div class="row">
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="coles">Coles</li>
<br>
<li class="hover" id="716">716 (Food and Sports)</li>
<br>
<li class="hover" id="bdb">Big Ditch Brewing</li>
<br>
</ul>
</div>
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="barbill">Bar Bill</li>
<br>
<li class="hover" id="lloyds">Lloyds</li>
<br>
<li class="hover" id="abv">Allen Burger Venture</li>
<br>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6" id="foodInfo">
<div class="row">
<div class="pictureofeats" id="foodImg"></div>
</div>
</div>

Store the required classname in the data-id attribute for the restaurant name
and toggle the display for the images keeping the positioned as absolute
JS Fiddle
Structure your HTML as following:
<div class="parent">
<div class="a">
<div class="img1 active">
1
</div>
<div class="img2">
2
</div>
<div class="img3">
3
</div>
</div>
<div class="b">
<div data-id="img1">abc</div>
<div data-id="img2">def</div>
<div data-id="img3">ghi</div>
</div>
</div>
CSS:
.parent {
width: 100%;
}
.a,.b {
display: inline-block;
min-width: 48%;
}
.img1,.img2,.img3 {
position: absolute;
display: none;
}
.active {
display: block;
}
JS:
$('.b div').click(function() {
var x = $(this).data('id');
$('.a div').removeClass('active');
$('div.' + x).addClass('active');
})

try something like this:
<div id="restId" class="row drinks brunchpic"><img src="pics/buffalofood.png" width="200px"/>
<div class="row">
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="coles">Coles</li><br>
<li class="hover" id="716">716 (Food and Sports)</li><br>
<li class="hover" id="bdb">Big Ditch Brewing</li><br>
</ul>
</div>
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="barbill">Bar Bill</li><br>
<li class="hover" id="lloyds">Lloyds</li><br>
<li class="hover" id="abv">Allen Burger Venture</li><br>
</ul>
</div>
</div>
</div>
and in javascript:
$('#restId').click( function(){
$('#restId img').attr('src', newSource);
});
I think this is the logic

Add a class in an anchor tag within a div with jquery

does anyone know how Can I add a class in the A tag:
Subscribe
Here is my html:
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>

you can use
$('a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('div#prod-subscription a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
.classHere{
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>

You could use jQuery's filter function and filter the link where the exact text is 'Subscribe' (this may cause problems if you have multiple links with that exact text)
$('a').filter(function() {
return $(this).text() === 'Subscribe';
}).addClass('new-class');
.new-class {color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Subscribe

Not sure I fully understand the question. Do you just want to give the anchor tag a class? That can be done as simply as <a class="your_class" href="your_link">Subscribe</a>

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.

how to display the links in tabs in bootstrap?

i need to display the a.php,b.php,c.php in the tabs tab2,tab3,tab4 respectively i have written the following code but the links a.php,b.php,c.php is not displaying in the tabs tab2,tab3,tab4 respectively instead of that if i click on the tab2 it redirects to the a.php page but i need to display in a tab manner in which if i click the tab2 it should display the a.php in the tab2 respectively what should i change to display the links on the tab ? kindly help me Thanks in advance
<script >
$('#tab2').load('a.php');
$('#tab3').load('b.php');
$('#tab4').load('c.php');
</script>
</head>
<body>
<div class="tabbable" style="margin-bottom: 18px;">
<ul class="nav nav-tabs">
<li class="active">Request Audit</li>
<li class="">Status</li>
<li class="">Settings</li>
<li class="">Help</li>
</ul>
<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
<div class="tab-pane active" id="tab1">
<p>Placeholder 1</p>
</div>
<div class="tab-pane" id="tab2">
<p>Placeholder 2</p>
</div>
<div class="tab-pane" id="tab3">
<p>Placeholder 3</p>
</div>
<div class="tab-pane" id="tab4">
<p>Placeholder</p>
</div>
</div>
</div>
</body>

You can change the href link by using $("#tab1").attr("href", "#a.php");
$(function(){
$("#tab1").attr("href", "#a");
$("#tab2").attr("href", "#b");
$("#tab3").attr("href", "#c");
$("#tab4").attr("href", "#d");
});
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs-container">
<ul class="tabs-menu">
<li class="current"><a id="tab1" href="#tab-1">Tab 1</a></li>
<li><a id="tab2" href="#tab-2">Tab 2</a></li>
<li><a id="tab3" href="#tab-3">Tab 3</a></li>
<li><a id="tab4" href="#tab-4">Tab 4</a></li>
</ul>
<div class="tab">
<div id="a" class="tab-content">
<p>Tesing a.php </p>
</div>
<div id="b" class="tab-content">
<p>Tesing b.php </p>
</div>
<div id="c" class="tab-content">
<p>Tesing c.php </p>
</div>
<div id="d" class="tab-content">
<p>Tesing d.php </p>
</div>
</div>
</div>

Solution
Fix is to put your script code into a document ready function as below
<script>
$(window).load(function() {
$('#tab2').load('a.php');
$('#tab3').load('b.php');
$('#tab4').load('c.php');
});
</script>
Alternate Solution
Alternatively, you can workout as below.
As you are loading jquery from a third party domain, this document ready statements are executed first asynchronously. So download the jquery.min.js and load it from your local.