Если я правильно понимаю вашу HTML-структуру, она выглядит примерно так:
<!-- The list... -->
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<!-- The divs -- note I've assumed there's a container... -->
<div id="container">
<div class="head">Header One</div>
<div class="Content">Content One</div>
<div class="head">Header Two</div>
<div class="Content">Content Two</div>
<div class="head">Header Three</div>
<div class="Content">Content Three</div>
<div class="head">Header Four</div>
<div class="Content">Content Four</div>
</div>
... только с семью предметами, а не с четырьмя.
Если это так, это будет сделано ( живая копия ):
jQuery(function($) {
$(".Content").hide();
$("li").click(function() {
showDivs($("#container div.head:eq(" + $(this).index() + ")"));
});
$(".head").click(function() {
showDivs($(this));
});
function showDivs(head) {
$(".Content").hide();
head.next().fadeIn("slow");
}
});
Там я неявно связываю список с заголовками, где они находятся в своем контейнере. Итак, первый li относится к первому div с class = "head", второму ко второму и т. Д. Я делаю это с помощью index, чтобы узнать, какой li был нажат, а затем поиск связанных div.head, используя :eq.
Делать это структурно, а не со значениями id значительно упрощает обслуживание. С другой стороны, вы можете сделать это, указав каждому атрибуту li a data-div значение id соответствующего элемента div:
<ul>
<li data-div="h1">One</li>
<li data-div="h2">Two</li>
<li data-div="h3">Three</li>
<li data-div="h4">Four</li>
</ul>
<div id="container">
<div id="h1" class="head">Header One</div>
<div class="Content">Content One</div>
<div id="h2" class="head">Header Two</div>
<div class="Content">Content Two</div>
<div id="h3" class="head">Header Three</div>
<div class="Content">Content Three</div>
<div id="h4" class="head">Header Four</div>
<div class="Content">Content Four</div>
</div>
Тогда ( живая копия ):
jQuery(function($) {
$(".Content").hide();
$("li").click(function() {
showDivs($("#" + $(this).attr("data-div")));
});
$(".head").click(function() {
showDivs($(this));
});
function showDivs(head) {
$(".Content").hide();
head.next().fadeIn("slow");
}
});
data-* атрибуты действительны с HTML5, но все браузеры поддерживают их прямо сейчас. (data-* - это попытка кодифицировать и господствовать в использовании людьми недопустимых атрибутов, предоставляя им правильный способ сделать это, не вступая в конфликт с будущими дополнениями к спецификации.)