Интерфейс навигации на JavaScript


Я думаю, что метод Slice() немного суховато, и склонных к ломкости, если я передумаю насчет удостоверения личности имена, но я хотел, чтобы это был универсальный, чтобы я мог добавить типы легко.

Там может быть другой / лучший способ сделать это просто с помощью CSS вложенность "панели", в элементах ли?

Разметка:

   <ul id="type-select">
    <li><a id="type-1" href="#">1</a></li>
    <li><a id="type-2" href="#">2</a></li>
    ...
   </ul>

   <div id="panel-1" class="panel">blah</div>
   <div id="panel-2" class="panel">blah</div> 
   ...   

На JavaScript:

function switchType(type){
    $("#type-select li a").removeClass("selected-type");
    $("#type-"+type).addClass("selected-type");
    $(".panel").removeClass("selected-panel");
    $("#panel-"+type).addClass("selected-panel");   
}

// initial state
$("#no-results").hide();
switchType("1");
$("#type-select li a").click(function(){switchType(this.id.slice(5))});


224
6
задан 12 мая 2011 в 09:05 Источник Поделиться
Комментарии
1 ответ

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

Для того чтобы сделать внедрение экологически чистого, вы можете добавить прямую ссылку на соответствующие панели в ссылке. Я хотел бы использовать атрибут атрибут и обратитесь к панели, используя URL-адрес хэш. Это имеет то преимущество, что он будет работать без JavaScript или CSS, перейдя к выбранной панели.

Вы можете оставить идентификаторна связи и использовать прямые ссылки на них функции.

<ul id="type-select">
<li><a href="#panel-1">1</a></li>
<li><a href="#panel-2">2</a></li>
</ul>

Рассмотреть используя CSS :целевой псевдо-класса для функции:

.panel { display: none; }
.panel:target { display: block; }

И добавить JavaScript, для браузеров, которые не поддерживают его и установить классы:

$("#type-select li a").click(function(){return switchType(this)});

function switchType(link){
var hashPos = link.href.indexOf("#");
if (hashPos >= 0) {
// Parsing out the hash and removing '#', in case the href
// attribute contains a complete URL, and in case some other
// method than a CSS selector is used to find the panel
var panelId = link.href.substring(hashPos + 1);

$("#type-select li a").removeClass("selected-type");
$(link).addClass("selected-type");
$(".panel").removeClass("selected-panel");
$("#" + panelId).addClass("selected-panel");
}
return false;
}

Не забудьте вернуть значение false , поэтому действия по умолчанию ссылки (что приведет к ненужной прокрутки) отменяется.

5
ответ дан 12 мая 2011 в 01:05 Источник Поделиться