ниже Я предоставлю код, который у меня есть сейчас - html, css и javascript. Все работает должным образом, за исключением 1 незначительной вещи, и я не могу понять это. Я до сих пор довольно новичок в javascript и думаю, что для выполнения этой работы необходим javascript, а если нет - это должно быть в моем css ...javascript или css - почти работает, работает в некоторых корягах
Если вы нажмете на каждый div с заголовками (NoS Members), (Зарегистрированные участники), и (Team Profiles) вы увидите, что фоновое изображение слайдера (маленький треугольник) работает и активно при нажатии любого из трех разделов, что при этом открывает еще один контейнер под ним. Тем не менее, все работает отлично, однако проблема, с которой я сталкиваюсь, заключается в том, что если вы сначала нажмете на (NoS Members), а затем пойдите направо и щелкните по второму - (Зарегистрированные участники) или последний (Team Profiles), затем попробуйте нажать на 2-й - (Зарегистрированные участники) или 1-й - (Члены NoS), ползунок не работает, возвращаясь назад влево. Кажется, что он работает только вправо, как только щелчок состоялся.
Вот jsfiddle того, что я получил: http://jsfiddle.net/5DTKH/
Код:
HTML
<div id="profile_selection">
<a href="#nos_profiles" class="profile_selection">{Ñا}<br />Members</a>
<a href="#registered_profiles" class="profile_selection">Registered<br />Members</a>
<a href="#team_profiles" class="profile_selection">Team<br />Profiles</a>
<div id="profile_selection_slider"></div>
</div>
<div id="nos_profiles" class="selection">
</div>
<div id="registered_profiles" class="selection">
</div>
<div id="team_profiles" class="selection">
</div>
CSS
#profile_selection { width: 612px; height: 152px; padding: 0; margin: 15px auto; position: relative; }
#profile_selection a {
width: 200px;
height: 105px;
padding: 45px 0 0 0;
margin: 0;
background: #333;
border: 2px solid #444;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
-moz-box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
-webkit-box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
float: left;
-moz-transition: all .2s ease;
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
color: #FFF;
font: 24px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
position: relative;
z-index: 4;
}
#profile_selection a:hover, #profile_selection a.active {
height: 100px;
padding: 50px 0 0 0;
background: #222;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
color: #DF7401;
}
/* ===== Start of 'Profile - Selection - Slider' ===== */
#profile_selection_slider {
width: 64px;
height: 16px;
background: url(http://www.nosclan.net/images/Home/menu_bg_hover.png) no-repeat 0 0 transparent;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
position: absolute;
top: 152px;
left: 275px;
z-index: 4;
}
#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider, #profile_selection a:nth-of-type(1).active ~ #profile_selection_slider{ left: 71px; }
#profile_selection a:nth-of-type(2):hover ~ #profile_selection_slider, #profile_selection a:nth-of-type(2).active ~ #profile_selection_slider { left: 275px; }
#profile_selection a:nth-of-type(3):hover ~ #profile_selection_slider, #profile_selection a:nth-of-type(3).active ~ #profile_selection_slider { left: 480px; }
/* ===== Start of 'NoS - Profiles' ===== */
#nos_profiles {
width: 950px;
height: 520px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
border-bottom: none;
-moz-border-radius: 12px 12px 0 0;
-webkit-border-radius: 12px 12px 0 0;
border-radius: 12px 12px 0 0;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
display: none;
position: relative;
top: -15px;
z-index: 1;
}
/* ===== Start of 'Registered - Profiles' ===== */
#registered_profiles {
width: 950px;
height: 520px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
border-bottom: none;
-moz-border-radius: 12px 12px 0 0;
-webkit-border-radius: 12px 12px 0 0;
border-radius: 12px 12px 0 0;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
display: none;
position: relative;
top: -15px;
z-index: 1;
}
/* ===== Start of 'Team - Profiles' ===== */
#team_profiles {
width: 950px;
height: 520px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
border-bottom: none;
-moz-border-radius: 12px 12px 0 0;
-webkit-border-radius: 12px 12px 0 0;
border-radius: 12px 12px 0 0;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
display: none;
position: relative;
top: -15px;
z-index: 1;
}
Javascript
$(document).ready(function(){
$('a.profile_selection').click(function(){
var a = $(this);
$('a.profile_selection').removeClass('active');
$(this).addClass('active');
var selection = $(a.attr('href'));
selection.removeClass('selection');
$('.selection').hide();
selection.addClass('selection');
if(selection.is(':visible')){
selection.slideToggle(400)
}else{selection.slideToggle(400)
};
});
});
Любая помощь будет высоко ценится - не уверен, если это имеет значение, либо, но я использую библиотеку Jquery 1.3.2 - я знаю, что это устаревшие, но это то, что это ...
И, наконец, Я хочу поблагодарить Ашиса и Ника за то, что он помог мне с другим вопросом, который имеет отношение к этому.
Работающий штраф для меня в Chrome 27.0.1453.116 – DoctorMick
ли фоновое изображение сместится влево после нажатия 3-го дивизиона под названием (профили команды)? Это не работает ... – user2732875