Отображать динамически 2 разных div по конкретным URL с помощью select

Question

Я очень новичок в JS. Я считаю, что проблема проста. Я хочу показать / скрыть 2 div на основе URL. Это моя ситуация:

Я нахожусь в https://urlzero.com и хочу отображать только div1, когда я https://urlone.com и https://urltwo.com Я хочу отображать div2.

<div class="div1">

<select size="1" name="links" onchange="window.location.href=this.value;">

        <option value="https://urlone.com">URL ONE</option>
        <option value="https://urltwo.com">URL TWO</option>

 </select>

</div>

<div class="div2">

<select size="1" name="links" onchange="window.location.href=this.value;">

        <option value="https://urlthree.com">URL THREE</option>
        <option value="https://urlfour.com">URL FOUR</option>

 </select>

</div>

Мой сценарий

window.onload = function() {

if(window.location.href == "https://urlone.com" || window.location.href == 
"https://urltwo.com" ) {

//Hide the element.
document.querySelectorAll('.div1')[0].style.display = 'none';
 }

 if(window.location.href == "https://urlzero.com") {
//Hide the element.
document.querySelectorAll('.div2')[0].style.display = 'none';
}
};

Это не работает !! Показать когда-либо 2 Div. Как я могу это сделать?

Спасибо

Answer 1

Сначала попытайтесь перехватить все URL, затем используйте код, очень похожий на приведенный ниже код, в соответствии с вашей логикой. Вы можете изменить значение null на неопределенное или пустое в зависимости от значения url catchd. Надеюсь, это сработает (версия JQuery) ..............

var $urlOne="https://urlone.com";
var $urlTwo="https://urltwo.com";
var $urlZero="https://urlzero.com";

if(($urlOne =="https://urlone.com" || $urlZero !='') && 
($urlTwo=="https://urltwo.com" || $urlZero!='')) {
 //Hide the element.
$(".div1").hide();
$(".div2").show();
}

if($urlZero=="https://urlzero.com"||$urlZero !='') {
//Hide the element.
$(".div2").hide();
$(".div1").show();
};