在相同的html文件/页面上更改内容 [英] Changing content on the same html file/page
问题描述
我不确定如何解释我的问题，所以我找不到任何东西，但我会尽我所能解释它。
我是刚开始学习html / css，我正在处理我的第一个项目，我很好奇如何通过点击相同html页面上的导航栏来更改内容。
这里是我的图片示例：
jQuery解决方案...这是
< head>
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js\"> ;</script>
< / head>
< ; div class =wrapper>
< nav>
< ul>
< li data-rel =1class =active>第1部分< / li>
< li data-rel =2>第2部分< / li>
< li data-rel =3>第3部分< / li>
< li data-rel =4>第4部分< / li>
< / ul>
< / nav>
< section>
<文章>
< h4>第1部分< / h4>
< / article>
< / section>
< section>
<文章>
< h4>第2部分< / h4>
< / article>
< / section>
< section>
<文章>
< h4>第3部分< / h4>
< / article>
< / section>
< section>
<文章>
< h4>第4部分< / h4>
< / article>
< / section>
< / div>
。包装器（
position：relative;
width：960px;
padding：10px;
}
部分{
背景：＃7f7f7f;
位置：绝对;
display：none;
top：10px;
right：0;
width：740px;
min-height：400px;
颜色：#fff;
border：4px solid＃000;
}
部分：first-of-type {
display：block;
}
nav {
float：left;
width：200px;
}
ul {
list-style：none;
}
li {
background：＃c3c3c3;
宽度：100％;
height：32px;
line-height：32px;
margin-bottom：10px;
text-align：center;
颜色：#fff;
光标：指针;
border：4px solid＃000;
}
.active {
background：＃7f7f7f;
}
< / body> 标记。
< script>
（function（$）{
$（'nav li'）。click（function（）{
$（this）.addClass（'active'）。siblings（'li'） .removeClass（'active'）;
'（'section：nth-of-type（'+ $（this）.data（'rel'）+'）'）。stop（）。fadeIn（400， 'linear'）。siblings（'section'）。stop（）。fadeOut（400，'linear'）;
}）;
}）（jQuery）;
< / script>
如果您想使用AJAX获取内容
当然，首先在您的文档中包含像前面示例中那样的jQuery库
< head>
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js\"> ;</script>
< / head>
然后
-
在根文件夹中创建文件夹
包含，然后在包含文件夹中创建名为ext-content 然后在文件夹 ext-content中创建名为content1.html，content2.html...当你想显示不同类型的内容时，如果没有doctype和索引页中的其他内容，只是简单的内容。
内容页面示例
< div>内容< / div> -
将以前创建的导航改为此
< nav>
< ul>
< li data-content =content1class =active>第1部分< / li>
< li data-content =content2>第2部分< / li>
< li data-content =content3>第3部分< / li>
< li data-content =content4>第4部分< / li>
< / ul>
< / nav>
-
只留下一个部分，并在该部分使用
ext-contentlike like< section>
<文章>
< div class =ext-content>
< / div>
< / article>
< / section>
-
使用此脚本代替前面示例中的脚本
$（'nav li'）。click（function（）{
$ .ajax（{
type：'GET'，
url：'includes / ext-content /'+ $（this）.data（'content'）+'。html'，
dataType：'html'，
success：function（response ）{
$（'。ext-content'）。html（response）;
}
}）;
}）;
* 注意：你不需要使用章节，文章等你可以使用div，span ...
I am not sure how to explain my question, so I could not find anything by searching,but i will do my best to explain it.
I'm just starting to learn html/css and i am working on my first project, and i am curious how do I change content by clicking on navigation bar on the same html page.
here are my image examples:
jQuery solution...here's a FIDDLE
To be able to use this you must include jQuery in the <head> section of your HTML document. e.g.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<div class="wrapper">
<nav>
<ul>
<li data-rel="1" class="active">Section 1</li>
<li data-rel="2">Section 2</li>
<li data-rel="3">Section 3</li>
<li data-rel="4">Section 4</li>
</ul>
</nav>
<section>
<article>
<h4>Section 1</h4>
</article>
</section>
<section>
<article>
<h4>Section 2</h4>
</article>
</section>
<section>
<article>
<h4>Section 3</h4>
</article>
</section>
<section>
<article>
<h4>Section 4</h4>
</article>
</section>
</div>
.wrapper {
position: relative;
width: 960px;
padding: 10px;
}
section {
background: #7f7f7f;
position: absolute;
display: none;
top: 10px;
right: 0;
width: 740px;
min-height: 400px;
color: #fff;
border: 4px solid #000;
}
section:first-of-type {
display: block;
}
nav {
float: left;
width: 200px;
}
ul {
list-style: none;
}
li {
background: #c3c3c3;
width: 100%;
height: 32px;
line-height: 32px;
margin-bottom: 10px;
text-align: center;
color: #fff;
cursor: pointer;
border: 4px solid #000;
}
.active {
background: #7f7f7f;
}
Put this script just before the </body> tag.
<script>
(function($) {
$('nav li').click(function() {
$(this).addClass('active').siblings('li').removeClass('active');
$('section:nth-of-type('+$(this).data('rel')+')').stop().fadeIn(400, 'linear').siblings('section').stop().fadeOut(400, 'linear');
});
})(jQuery);
</script>
If you wanna use AJAX for getting content
Of course first include jQuery library in your document like in previous example
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
then
Create folder
includesin your root folder then inincludesfolder create folder namedext-contentthen in folderext-contentcreate couple of HTML documents named e.gcontent1.html,content2.html... with different content you wish to show of course without doctype and other stuff from index page just simple content.
example of content page
<div>Content</div>Change previously created navigation into this
<nav> <ul> <li data-content="content1" class="active">Section 1</li> <li data-content="content2">Section 2</li> <li data-content="content3">Section 3</li> <li data-content="content4">Section 4</li> </ul> </nav>Leave only one section and in that section create div with class
ext-contentlike below<section> <article> <div class="ext-content"> </div> </article> </section>Use this script instead of one in the previous example
$('nav li').click(function() { $.ajax({ type: 'GET', url: 'includes/ext-content/'+$(this).data('content')+'.html', dataType: 'html', success: function(response) { $('.ext-content').html(response); } }); });
*Note: You don't need to use sections, articles e.t.c. you could use divs, spans...
这篇关于在相同的html文件/页面上更改内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
