Отображение Div на основе URL-адреса с использованием Javascript

Я новичок в Javascript, и у меня возникают проблемы с отображением и скрытием некоторых div на основе url.Отображение Div на основе URL-адреса с использованием Javascript

У меня есть 4 divs, которые должны отображаться в зависимости от URL-адреса. В 4 дивы являются:

Див 1

<body onload="callOnPageLoad1()”> 
<div id="homeName" style="display:block"><h5>HOME</h5></div>

и должна отображаться только тогда, когда по адресу:

http://www.fitzofdesign.com/

Div 2

<body onload="callOnPageLoad2()”> 
<div id="profilesName" style="display:block"><h5>PROFILES</h5></div>

и необходимости ы, которые будут отображаться только тогда, когда по адресу:

http://www.fitzofdesign.com/?category=Profiles

Див 3

<body onload="callOnPageLoad3()”> 
<div id="retailName" style="display:block"><h5>RETAIL</h5></div>

и должна отображаться только тогда, когда по адресу:

http://www.fitzofdesign.com/?category=Retail

Div 4

<body onload="callOnPageLoad4()”> 
<div id="blogName" style="display:block"><h5>BLOG</h5></div>

и должен отображаться только тогда, когда на:

http://www.fitzofdesign.com/?category=Blog

JS я использую:

<script type="text/javascript"> 
function callOnPageLoad1() 
{ 
var url = window.location.href; 
if(url == "http://www.fitzofdesign.com/") 
{ 
document.getElementById('homeName').style.display = 'block'; 
document.getElementById('profilesNamed').style.display = 'none'; 
document.getElementById('retailName').style.display = 'none'; 
document.getElementById('blogName').style.display = 'none'; 
} 
else { 
document.getElementById('homeName').style.display = 'none'; 
} 
} 
</script> 

<script type="text/javascript"> 
function callOnPageLoad2() 
{ 
var url = window.location.href; 
if(url == "http://www.fitzofdesign.com/?category=Profiles") 
{ 
document.getElementById('homeName').style.display = 'none'; 
document.getElementById('profilesNamed').style.display = 'block'; 
document.getElementById('retailName').style.display = 'none'; 
document.getElementById('blogName').style.display = 'none'; 
} 
else { 
document.getElementById('profilesNamed').style.display = 'none'; 
} 
} 
</script> 

<script type="text/javascript"> 
function callOnPageLoad3() 
{ 
var url = window.location.href; 
if(url == "http://www.fitzofdesign.com/?category=Retail") 
{ 
document.getElementById('homeName').style.display = 'none'; 
document.getElementById('profilesNamed').style.display = 'none'; 
document.getElementById('retailName').style.display = 'block'; 
document.getElementById('blogName').style.display = 'none'; 
} 
else { 
document.getElementById('retailName').style.display = 'none'; 
} 
} 
</script> 

<script type="text/javascript"> 
function callOnPageLoad4() 
{ 
var url = window.location.href; 
if(url == "http://www.fitzofdesign.com/?category=Blog") 
{ 
document.getElementById('homeName').style.display = 'none'; 
document.getElementById('profilesNamed').style.display = 'none'; 
document.getElementById('retailName').style.display = 'none'; 
document.getElementById('blogName').style.display = 'block'; 
} 
else { 
document.getElementById('blogName').style.display = 'none'; 
} 
} 
</script>

В настоящее время единственный раз, когда это рабочий правильно, когда я на:

http://www.fitzofdesign.com/

потому что Div 1 появляется, а остальные 3 Divs скрыты.

Это не работает, когда я нахожусь:

http://www.fitzofdesign.com/?category=Profiles 
http://www.fitzofdesign.com/?category=Retail 
http://www.fitzofdesign.com/?category=Blog

потому что Div 2, 3 & 4 все неправильно отображения для каждого URL.

Надеюсь, это имеет смысл.

Помогите пожалуйста?

Благодаря Роуэн

источник

2014-02-11 user3295605

URL не будет выглядеть как 'HTTP: //www.fitzofdesign.com/ категория = Retail'. Они, скорее всего, будут выглядеть как «http: //www.fitzofdesign.com? Category = Retail». Дважды проверьте URL-адреса и убедитесь, что ваши URL-адреса верны. – Bic

Я только что сделал echo curPageURL(); быть уверенным, и URL-адреса верны, к сожалению. – user3295605

Вы должны объединить все эти функции в нечто вроде:

var url = window.location.href; 
if(url == "http://www.fitzofdesign.com/") 
{ 
    document.getElementById('homeName').style.display = 'block'; 
    document.getElementById('profilesNamed').style.display = 'none'; 
    document.getElementById('retailName').style.display = 'none'; 
    document.getElementById('blogName').style.display = 'none'; 
} 
else if(url == "http://www.fitzofdesign.com/?category=Profiles") 
{ 
    document.getElementById('homeName').style.display = 'none'; 
    document.getElementById('profilesNamed').style.display = 'block'; 
    document.getElementById('retailName').style.display = 'none'; 
    document.getElementById('blogName').style.display = 'none'; 
}

И вы должны убедиться, что эта проверка называется после того как все нагрузки, так что положить внутрь что-то вроде Jquery документа ,готов:

$(document).ready(function() { 
    var url = window.location.href 
    // rest of the code 
}

Кроме того, вы можете изменить чеки:

url == "http://www.fitzofdesign.com/?category=Profiles"

url.indexOf("category=Profiles") > -1

Надежда, что помогает

источник

2014-02-11 04:46:12 Sol

Во-первых скрыть все дивы. В окне window.onLoad введите значение querystring и используйте его для отображения соответствующего div.

Ниже приведен фрагмент кода для извлечения значения категории запроса.

function getParameterByName(name) { 
     name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); 
     var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), 
      results = regex.exec(location.search); 
     return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); 
    }

источник

2014-02-11 04:46:40 gokul

Хорошо, сначала вам не нужно помещать каждый из них в свои собственные теги скриптов. Держите их вместе.

Во-вторых, сохранить материал неоднократным в JS в качестве переменных для повышения производительности и чистый код:

var url = window.location.href, 
fitz = "http://www.fitzofdesign.com/" 
home = document.getElementById('homeName'), 
profile = document.getElementById('profilesNamed'), 
retail = document.getElementById('retailName').style.display, 
blog = document.getElementById('blogName').style.display;

В-третьих, вы можете проверить переменные друг против друга:

if(url == fitz) { 
    home.style.display = 'block'; 
    profile.style.display = 'none'; 
    retail.style.display = 'none'; 
    blog.style.display = 'none'; 
} 
else if (url == fitz + "?category=Profiles") { 
    home.style.display = 'none'; 
    profile.style.display = 'block'; 
    retail.style.display = 'none'; 
    blog.style.display = 'none'; 
} 
else if (url == fitz + "?category=Profiles") { 
    // etc. 
}

Наконец, вам нужно создать прослушиватель событий, который будет определять, когда происходит клик или какое-либо другое поведение пользователя. Это должно запускать эту функцию каждый раз.

Посмотрите addEventListener

источник

2014-02-11 04:54:05 danwarfel

Отображение Div на основе URL-адреса с использованием Javascript

ответ

Смежные вопросы