我有更改div内容的jquery问题。我在stackoverflow上搜索，我在here中找到了一些关于它的代码但是我的代码有点不同。我想在点击时更改内容，但我有2个不同的框，他们将分别使用。这是 orginal codes on stackoverflow 。我将其修改为 MY DEMO HTML和Jquery上的错误。红色仅控制红色区域，蓝色仅控制蓝色区域。我不知道jquery和我自昨晚以来的尝试。我等你的帮忙了。谢谢......
<div class="div_155px">
<div class="div_1_9"><a href="#div_1_9_first" id="div_1_6-1">1</a></div>
<div class="div_1_9"><a href="#div_1_9_second" id="div_1_6-2">2</a></div>
<div class="div_1_9"><a href="#div_1_9_third" id="div_1_6-3">3</a></div>
<div class="div_1_9"><a href="#div_1_9_fourth" id="div_1_6-4">4</a></div>
<div class="div_1_9"><a href="#div_1_9_fifth" id="div_1_6-5">5</a></div>
<div class="div_1_9"><a href="#div_1_9_sixth" id="div_1_6-6">6</a></div>
<div class="div_1_9"><a href="#div_1_9_seventh" id="div_1_6-7">7</a></div>
<div class="div_1_9"><a href="#div_1_9_eighth" id="div_1_6-8">8</a></div>
<div class="div_1_9"><a href="#div_1_9_nineth" id="div_1_6-9">9</a></div>
</div>
<div class="div_600px">
<div id="div_1_9_first" class="div_4_5_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum quis enim pretium pellentesque. Vestibulum facilisis mi vel pulvinar aliquam. Mauris in imperdiet metus, sit amet auctor ex. Etiam ac nulla vitae lectus convallis pharetra at ut diam. Phasellus quis turpis ex. Proin bibendum lacus quis aliquam aliquam. Ut commodo suscipit tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce non sapien lacinia, aliquet sapien nec, scelerisque turpis. Nam consectetur, turpis eget ornare auctor, neque arcu rutrum metus, pharetra scelerisque ipsum magna et sapien.</div>
<div id="div_1_9_second" class="div_4_5_content">Etiam et dui molestie, consequat turpis vel, tristique nisl. Suspendisse eget sollicitudin velit. Ut felis nunc, sagittis eget varius sed, interdum et massa. Cras dapibus aliquam tincidunt. Aliquam fringilla magna ac arcu pretium, eget bibendum turpis elementum. Aliquam ut vestibulum augue, id efficitur arcu. Curabitur malesuada lacus ac volutpat commodo. Aliquam nec consectetur metus. Pellentesque ac nunc a purus faucibus molestie vel vitae purus. Maecenas nibh libero, fringilla eu nulla nec, ornare placerat tortor. Maecenas imperdiet posuere lorem, eu pellentesque tortor aliquet et. Phasellus et pellentesque.</div>
<div id="div_1_9_third" class="div_4_5_content">Duis dapibus ipsum quis suscipit varius. Suspendisse potenti. Maecenas a augue lectus. Morbi vehicula ac lectus ac euismod. Suspendisse vulputate dignissim lorem non rutrum. Nunc ut rhoncus sapien. Duis commodo ante quis elementum pretium. Nunc posuere odio augue, in mattis dui convallis a. Donec at fringilla urna. Nunc a velit ut odio imperdiet malesuada id quis dolor. Donec at iaculis ipsum. Etiam sapien libero, gravida a sollicitudin non, convallis consequat nibh. Integer vulputate dignissim nisl sit amet facilisis.</div>
<div id="div_1_9_fourth" class="div_4_5_content">Pellentesque vel erat sed nibh elementum scelerisque. Nunc luctus libero a mauris condimentum euismod. Vivamus justo lectus, mattis quis mauris sed, tincidunt pulvinar orci. Curabitur pharetra tortor ligula, at interdum nunc ornare at. Duis pretium egestas leo, in ullamcorper nibh volutpat in. Suspendisse eleifend nibh et vehicula bibendum. Praesent condimentum convallis nunc non fermentum. Pellentesque et nulla ligula. Integer non ultricies eros, vitae cursus est. Curabitur est orci, placerat et nisl a, scelerisque volutpat libero. Duis accumsan dui est, id sodales quam iaculis vel. Etiam quis urna enim. </div>
<div id="div_1_9_fifth" class="div_4_5_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum quis enim pretium pellentesque. Vestibulum facilisis mi vel pulvinar aliquam. Mauris in imperdiet metus, sit amet auctor ex. Etiam ac nulla vitae lectus convallis pharetra at ut diam. Phasellus quis turpis ex. Proin bibendum lacus quis aliquam aliquam. Ut commodo suscipit tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce non sapien lacinia, aliquet sapien nec, scelerisque turpis. Nam consectetur, turpis eget ornare auctor, neque arcu rutrum metus, pharetra scelerisque ipsum magna et sapien.</div>
<div id="div_1_9_sixth" class="div_4_5_content">Etiam et dui molestie, consequat turpis vel, tristique nisl. Suspendisse eget sollicitudin velit. Ut felis nunc, sagittis eget varius sed, interdum et massa. Cras dapibus aliquam tincidunt. Aliquam fringilla magna ac arcu pretium, eget bibendum turpis elementum. Aliquam ut vestibulum augue, id efficitur arcu. Curabitur malesuada lacus ac volutpat commodo. Aliquam nec consectetur metus. Pellentesque ac nunc a purus faucibus molestie vel vitae purus. Maecenas nibh libero, fringilla eu nulla nec, ornare placerat tortor. Maecenas imperdiet posuere lorem, eu pellentesque tortor aliquet et. Phasellus et pellentesque.</div>
<div id="div_1_9_seventh" class="div_4_5_content">Duis dapibus ipsum quis suscipit varius. Suspendisse potenti. Maecenas a augue lectus. Morbi vehicula ac lectus ac euismod. Suspendisse vulputate dignissim lorem non rutrum. Nunc ut rhoncus sapien. Duis commodo ante quis elementum pretium. Nunc posuere odio augue, in mattis dui convallis a. Donec at fringilla urna. Nunc a velit ut odio imperdiet malesuada id quis dolor. Donec at iaculis ipsum. Etiam sapien libero, gravida a sollicitudin non, convallis consequat nibh. Integer vulputate dignissim nisl sit amet facilisis.</div>
<div id="div_1_9_eighth" class="div_4_5_content">Pellentesque vel erat sed nibh elementum scelerisque. Nunc luctus libero a mauris condimentum euismod. Vivamus justo lectus, mattis quis mauris sed, tincidunt pulvinar orci. Curabitur pharetra tortor ligula, at interdum nunc ornare at. Duis pretium egestas leo, in ullamcorper nibh volutpat in. Suspendisse eleifend nibh et vehicula bibendum. Praesent condimentum convallis nunc non fermentum. Pellentesque et nulla ligula. Integer non ultricies eros, vitae cursus est. Curabitur est orci, placerat et nisl a, scelerisque volutpat libero. Duis accumsan dui est, id sodales quam iaculis vel. Etiam quis urna enim. </div>
<div id="div_1_9_nineth" class="div_4_5_content">Pellentesque vel erat sed nibh elementum scelerisque. Nunc luctus libero a mauris condimentum euismod. Vivamus justo lectus, mattis quis mauris sed, tincidunt pulvinar orci. Curabitur pharetra tortor ligula, at interdum nunc ornare at. Duis pretium egestas leo, in ullamcorper nibh volutpat in. Suspendisse eleifend nibh et vehicula bibendum. Praesent condimentum convallis nunc non fermentum. Pellentesque et nulla ligula. Integer non ultricies eros, vitae cursus est. Curabitur est orci, placerat et nisl a, scelerisque volutpat libero. Duis accumsan dui est, id sodales quam iaculis vel. Etiam quis urna enim. </div>
</div>
$(function () {
$(window).on('hashchange', function () {
var tabContainers = $('.div_600px > div'),
hash = window.location.hash != '' ? window.location.hash : '#div_1_9_first';
console.log(hash)
tabContainers.hide();
tabContainers.filter(hash).show();
$('.div_1_9 a').removeClass('selected');
$('a[href="' + hash + '"]', '.div_1_9').addClass('selected');
}).trigger('hashchange');
});
答案 0 :(得分：0)
我已经创建了一个JSFiddle，并且可以自由地改变方法。如果这不是你想要的，请道歉。
我已移除所有<a>代码，并在所有div上添加了click功能。
function registerEvents() {
$(".div_1_9").on("click", function () {
var num = $(this).text();
$($(".div_600px").children()).hide();
$($(".div_600px").children()[num-1]).fadeIn();
});
$(".div_1_4").on("click", function(){
var num = $(this).text();
if (isNaN(num)) {
switch (num) {
case "A":
num = 0;
break;
case "B":
num = 1;
break;
case "C":
num = 2;
break;
case "D":
num = 3;
break;
default: num = parseInt(num);
break;
}
}
$($(".div_600px_2").children()).hide();
$($(".div_600px_2").children()[num]).fadeIn();
})
}
(function () {
console.log("call")
registerEvents();
})();