Question

我正在编制一个网站，您可以在其中与对方聊天，但我不希望我的访问者在想要转到另一个页面时被重定向。所以网址总是像myurl.com一样没有任何斜线。唯一的方法（不使用Flash）是显示和隐藏div，但这就是问题所在。我已经尝试了很多次，并在互联网上寻求帮助，但没有解决我的问题。加载页面时，只有#content_home应该可见，并且当您单击导航中应显示div的按钮时。 我使用了互联网上的随机图片，只是为了填写div。这是我的（不工作）代码：

<!doctype html>
<html>
<head>
<title>Home</title>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<center>
<div id="nav_menu">
<button id="home">Home</button>
<button id="chat">Chat</button>
<button id="contact">Contact</button>
</div>
<div id="content_home">
<!-- Content center -->
<img src="http://hostgatordomains.com/wp-content/uploads/2014/06/why-need-img-2.png">
</div>
<div id="content_chat">
<img src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg">
</div>
<div id="content_contact">
<img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg">
</div>
</center>
</body>
<script src="//code.jquery.com/jquery-2.1.3.min.js">
$(document).ready(function(){
$('#home').click(function(){
$('#content_home').show();
$('#content_chat').hide();
$('#content_contact').hide();
});
});
$('#chat').click(function(){
$('#content_home').hide();
$('#content_chat').show();
$('#content_contact').hide();
});
$('#contact').click(function(){
$('#content_home').hide();
$('#content_chat').hide();
$('#content_contact').show();
});
</script>
<style>
#content_home {
    height: 100px;
    width: 100px;
}
#content_chat {
    height: 100px;
    width: 100px;
}

button {
    color: black;
    background-color: #F0E6EE;
}
button:hover {
    background-color: #C2BCC1;
    cursor: pointer;

}
#content_center {
    border: 1px solid black;
    text-align: left;
    left: 50px;
    height: 500px;
    width: 80%;
    box-shadow: 3px 3px 5px #787880;
    border-radius: 10px;
}
</style>
</html>

Answer 1

一个非常简单的方法是只将style="display:none;"内联添加到你不希望显示onload的div中，jQuery将处理其余部分：

Working Example

另外，你的jQuery没有正确关闭:(你会注意到你使用了正确的缩进）

$(document).ready(function(){
    $('#home').click(function(){
        $('#content_home').show();
        $('#content_chat').hide();
        $('#content_contact').hide();
    });
    $('#chat').click(function(){
        $('#content_home').hide();
        $('#content_chat').show();
        $('#content_contact').hide();
    });
    $('#contact').click(function(){
        $('#content_home').hide();
        $('#content_chat').hide();
        $('#content_contact').show();
   });
}); // close here

Answer 2

唯一的方法（不使用Flash）是显示和隐藏div。

我认为这是不正确的，您可以通过多种方式执行此操作，而无需在一个页面上加载整个网站的内容。据说这样做就是你实现它的方式。首先考虑@ M.Doye评论，并在准备文件时修复你的包围，因为它只是在准备方法中绑定一个。

其次，稍微改变一下这些功能，我怀疑你不想让标签在你点击某些内容时切换，而是希望代码一次显示一个标签。

类似的东西：

＆＃13;

$(document).ready(function(){
    $('#home').click(function(){
        $('.contentTab').hide(); // Hide all tabs with class contentTab
        $('#content_home').show(); // Show only the tab you want to show
    });
    $('#chat').click(function(){
        $('.contentTab').hide();
        $('#content_chat').show();
    });
    $('#contact').click(function(){
        $('.contentTab').hide();
        $('#content_contact').show();
    });
  
    // A single method to do all the above if button id="xyz" then show element "content_" + button pressed id
    // You can use this instead of the 3 methods above, note the buttons now have class contentButton
    $('.contentButton').click(function(){
        $('.contentTab').hide(); 
        $('#content_' + $(this).attr('id')).show(); 
        console.log('#content_' + $(this).attr('id'))
    });
  
    // Show the first page
    $('#content_home').show(); 
});

＆＃13;

#content_home {
    height: 100px;
    width: 100px;
}
#content_chat {
    height: 100px;
    width: 100px;
}

button {
    color: black;
    background-color: #F0E6EE;
}
button:hover {
    background-color: #C2BCC1;
    cursor: pointer;

}
#content_center {
    border: 1px solid black;
    text-align: left;
    left: 50px;
    height: 500px;
    width: 80%;
    box-shadow: 3px 3px 5px #787880;
    border-radius: 10px;
}
.contentTab {
    /* Hide all content to start the page */
    display: none;
}

＆＃13;

<!doctype html>
<html>
	<head>
		<title>Home</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	</head>
	<body>
		<center>
			<div id="nav_menu">
				<button id="home" class="contentButton">Home</button>
				<button id="chat" class="contentButton">Chat</button>
				<button id="contact" class="contentButton">Contact</button>
				<button id="generic" class="contentButton">Generic</button>
			</div>
			<div id="content_home" class="contentTab">
				<!-- Content center -->
				<img src="http://hostgatordomains.com/wp-content/uploads/2014/06/why-need-img-2.png">
			</div>
			<div id="content_chat" class="contentTab">
				<img src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg">
			</div>
			<div id="content_contact" class="contentTab">
				<img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg">
			</div>
			<div id="content_generic" class="contentTab">
				<img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg">
			</div>
		</center>
	</body>

</html>

＆＃13;

或者，您可以使用Ajax将不同的页面加载到contentHome中以获取每个页面的内容，并一次将页面的内容加载到一个div中，以便用户永远不会离开页面，但仅限于在他们想要的时候获得他们想要的内容。

编辑：离开console.log，你应该把它拿掉。：）

麻烦隐藏文件准备好div

2 个答案: