Question

我正在尝试构建一个页面，该页面在一个div中有一个菜单，在另一个div中有一个内容面板，根据单击的菜单按钮加载内容。

这是我的HTML

<div>
    <button id="buttonOne" type="button">Content 1</button>
    <button id="buttonTwo" type="button">Content 2</button>
    <button id="buttonThree" type="button">Content 3</button>
</div>

<div class="contentPane">
    <div class="colContent"></div>
</div>

和js

$('#buttonOne').on('click', function(){
        $('#colContent').attr('id', 'sampleContent1');
    });

$('#buttonTwo').on('click', function(){
        $('#colContent').attr('id', 'sampleContent2');
    });

$('#buttonThree').on('click', function(){
        $('#colContent').attr('id', 'sampleContent3');
    });


$('#sampleContent1').html('<h1>Content One</h1><iframe width="560" height="315" src="https://www.youtube.com/embed/gpybxbeZfn4" frameborder="0" allowfullscreen></iframe><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, numquam dolor, id laborum reiciendis repellat tempora iusto velit odit harum obcaecati hic officia consequatur perspiciatis exercitationem tenetur placeat, beatae aut</p>');
$('#sampleContent2').html('<h1>Content Two</h1><iframe width="560" height="315" src="https://www.youtube.com/embed/tO7LIRhGbfo" frameborder="0" allowfullscreen></iframe><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, numquam dolor, id laborum reiciendis repellat tempora iusto velit odit harum obcaecati hic officia consequatur perspiciatis exercitationem tenetur placeat, beatae aut</p>');
$('#sampleContent3').html('<h1>Content Three</h1><iframe width="560" height="315" src="https://www.youtube.com/embed/PK8dsAeMmPk" frameborder="0" allowfullscreen></iframe><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, numquam dolor, id laborum reiciendis repellat tempora iusto velit odit harum obcaecati hic officia consequatur perspiciatis exercitationem tenetur placeat, beatae aut</p>');

jsFiddle

基于我在这里得到解答的多个问题，这应该有用，但它不是。我也尝试过使用：

$('#colContent').prop('id', 'sampleContent1');

和

$('#colContent').writeAttribute('id', 'sampleContent1');

但这些都没有成功。

注意：我最初尝试使用jquery选项卡执行此操作，但似乎所有选项卡都在页面加载的后台加载，并且位于后台的内容量导致页面在移动设备上停止运行，因此我回到绘图板，现在只在点击相关按钮时尝试加载内容。我哪里错了？

Answer 1

将$('#colContent')替换为$('.colContent')。您正在尝试设置ID为colContent的元素的ID。您的HTML元素的类为colContent，而不是 id 。

Answer 2

$('#buttonOne').on('click', function(){
        window.alert("One");
        $('.colContent').attr('id', 'sampleContent1');
    changeContent();
    });

$('#buttonTwo').on('click', function(){
        window.alert("Two");
        $('.colContent').attr('id', 'sampleContent2');
    changeContent();
    });

$('#buttonThree').on('click', function(){
        window.alert("Three");
        $('.colContent').attr('id', 'sampleContent3');
    changeContent();
    });


function changeContent() {
    $('#sampleContent1').html('<h1>Content One</h1><iframe width="560" height="315" src="https://www.youtube.com/embed/gpybxbeZfn4" frameborder="0" allowfullscreen></iframe><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, numquam dolor, id laborum reiciendis repellat tempora iusto velit odit harum obcaecati hic officia consequatur perspiciatis exercitationem tenetur placeat, beatae aut</p>');
$('#sampleContent2').html('<h1>Content Two</h1><iframe width="560" height="315" src="https://www.youtube.com/embed/tO7LIRhGbfo" frameborder="0" allowfullscreen></iframe><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, numquam dolor, id laborum reiciendis repellat tempora iusto velit odit harum obcaecati hic officia consequatur perspiciatis exercitationem tenetur placeat, beatae aut</p>');
$('#sampleContent3').html('<h1>Content Three</h1><iframe width="560" height="315" src="https://www.youtube.com/embed/PK8dsAeMmPk" frame`enter code here`border="0" allowfullscreen></iframe><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, numquam dolor, id laborum reiciendis repellat tempora iusto velit odit harum obcaecati hic officia consequatur perspiciatis exercitationem tenetur placeat, beatae aut</p>');

}

Answer 3

如果我是你，我会编写以下代码来实现这一目标：[jsFiddle](https://jsfiddle.net/yujiangshui/kukks37s/17/)

但这不是最好的做法，我为你制作了一个简单的版本。

当您了解有关jQuery和JavaScript的更多信息时，您将会发现此问题。

使用jquery将ID附加到div上

3 个答案: