同时控制 2 个 div 的可见性
我正在尝试使用选项卡式界面在网站上显示内容。第一组 div 是内容(文本),第二组是 div 外部包含文本的 div 中的关联图像,如下所示:
<div id="side-img-container">
<div class="side-img" id="image_1"><img src="image1.jpg" /></div>
<div class="side-img" id="image_2"><img src="image2.jpg" /></div>
<div class="side-img" id="image_3"><img src="image3.jpg" /></div>
<div class="side-img" id="image_4"><img src="image4.jpg" /></div>
<div class="side-img" id="image_5"><img src="image5.jpg" /></div>
</div>
<div id="content>
<ul class="tabs">
<li><a href="#tab_1">Tab 1</a></div>
<li><a href="#tab_2">Tab 2</a></div>
<li><a href="#tab_3">Tab 3</a></div>
<li><a href="#tab_4">Tab 4</a></div>
<li><a href="#tab_5">Tab 5</a></div>
</ul>
<div class="tab_container">
<div class="tab_content" id="tab_1">Content 1</div>
<div class="tab_content" id="tab_2">Content 2</div>
<div class="tab_content" id="tab_3">Content 3</div>
<div class="tab_content" id="tab_4">Content 4</div>
<div class="tab_content" id="tab_5">Content 5</div>
</div>
</div>
这使用以下 Jquery 使选项卡正常工作:
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
上面的 javascript 有什么办法可以实现吗?添加/修改,以便在显示内容选项卡时显示相应的图像选项卡,即:tab_1 和 image_1 等。
I'm trying to use a tabbed interface to display content on a website. The first set of divs is the content (text) and the second is an associated image in a div outside the div containing the text as follows:
<div id="side-img-container">
<div class="side-img" id="image_1"><img src="image1.jpg" /></div>
<div class="side-img" id="image_2"><img src="image2.jpg" /></div>
<div class="side-img" id="image_3"><img src="image3.jpg" /></div>
<div class="side-img" id="image_4"><img src="image4.jpg" /></div>
<div class="side-img" id="image_5"><img src="image5.jpg" /></div>
</div>
<div id="content>
<ul class="tabs">
<li><a href="#tab_1">Tab 1</a></div>
<li><a href="#tab_2">Tab 2</a></div>
<li><a href="#tab_3">Tab 3</a></div>
<li><a href="#tab_4">Tab 4</a></div>
<li><a href="#tab_5">Tab 5</a></div>
</ul>
<div class="tab_container">
<div class="tab_content" id="tab_1">Content 1</div>
<div class="tab_content" id="tab_2">Content 2</div>
<div class="tab_content" id="tab_3">Content 3</div>
<div class="tab_content" id="tab_4">Content 4</div>
<div class="tab_content" id="tab_5">Content 5</div>
</div>
</div>
This uses the following Jquery to make the tabs work:
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
Is there any way the above javascript can be added to/adapted so that the corresponding image tab is displayed when a content tab is displayed ie: tab_1 and image_1 etc. ?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
首先,您的 HTML 无效 - 您正在关闭带有
标记的
列表项。您还忘记关闭
#content
元素的id
属性值周围的引号。原来的JavaScript代码效率不是特别高,所以我们不妨重写一下。使用此代码,您不需要每个选项卡内容都具有
class
属性,这肯定会大大减轻 HTML 的负担:请在此处查看一个简单的演示:http://jsfiddle.net/ND7nU/
First of all, your HTML is invalid - you're closing
<li>
list items with</div>
tags. You've also forgotten to close the quote surrounding the#content
element'sid
attribute value.The original JavaScript code isn't particularly efficient, so we might as well rewrite it. Using this code, you do not need each of the tab content to have a
class
attribute, which certainly lightens up the HTML quite a bit:See a simple demo of this here: http://jsfiddle.net/ND7nU/
试试这个:
Try this :
检查jsfiddle.net 上的示例
Check this example on jsfiddle.net
从我的头顶来看,有点快速和肮脏:
编辑:您可以在选项卡单击事件处理程序中的任何位置使用它。
编辑 2: var s = etc 修复。
Bit quick and dirty from the top of my head:
Edit: You can use this anywhere in the tab click event handler.
Edit 2: var s = etc Fix.