求一个jquery或者原生javascript控制鼠标所点击的列表，对应一个当前div显示，其他div同时隐藏的案例

求一个jquery或者原生javascript控制鼠标所点击的列表，对应一个当前div显示，其他div同时隐藏的案例。例如，目前有li1li2li3。div1div2di... 求一个jquery或者原生javascript控制鼠标所点击的列表，对应一个当前div显示，其他div同时隐藏的案例。

例如，目前有li1 li2 li3。 div1 div2 div3。
共有3个li。点第一个li1，div1显示，div2和div3隐藏，点第二个li2，div1和div3隐藏，显示出来的是div2，最好能提供html结构和js代码，万分感谢！展开

 我来答

3个回答

#热议# 网上掀起『练心眼子』风潮，真的能提高情商吗？

yongirl320
2012-10-31 · TA获得超过830个赞

知道小有建树答主

回答量：280

采纳率：100%

帮助的人：477万

我也去答题访问个人页

关注

展开全部

下面是用JQUERY 做的，
你自己改下 HTML和 CSS就能用了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tabbed Structure - Regular</title>
<style>
body {
background-image:url(images/background.jpg);
background-repeat:no-repeat;
background-position:top center;
background-color:#657077;
margin:40px;
}
#tabbed_box_1 {
margin: 0px auto 0px auto;
width:300px;
}
.tabbed_box h4 {
font-family:Arial, Helvetica, sans-serif;
font-size:23px;
color:#ffffff;
letter-spacing:-1px;
margin-bottom:10px;
}
.tabbed_box h4 small {
color:#e3e9ec;
font-weight:normal;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
position:relative;
top:-4px;
left:6px;
letter-spacing:0px;
}
.tabbed_area {
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}
ul.tabs {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tabs li {
list-style:none;
display:inline;
}
ul.tabs li a {
background-color:#464c54;
color:#ffebb5;
padding:8px 14px 8px 14px;
text-decoration:none;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
border:1px solid #464c54;
background-image:url(images/tab_off.jpg);
background-repeat:repeat-x;
background-position:bottom;
}
ul.tabs li a:hover {
background-color:#2f343a;
border-color:#2f343a;
}
ul.tabs li a.active {
background-color:#ffffff;
color:#282e32;
border:1px solid #464c54;
border-bottom: 1px solid #ffffff;
background-image:url(images/tab_on.jpg);
background-repeat:repeat-x;
background-position:top;
}
.content {
background-color:#ffffff;
padding:10px;
border:1px solid #464c54;
font-family:Arial, Helvetica, sans-serif;
background-image:url(images/content_bottom.jpg);
background-repeat:repeat-x;
background-position:bottom;
}
#content_2, #content_3 { display:none; }
.content ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.content ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:15px;
padding-bottom:15px;
font-size:13px;
}
.content ul li:last-child {
border-bottom:none;
}
.content ul li a {
text-decoration:none;
color:#3e4346;
}
.content ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.content ul li a:hover {
color:#a59c83;
}
.content ul li a:hover small {
color:#baae8e;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
// When the document loads do everything inside here ...
$(document).ready(function(){
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(".content").hide();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).show();
});
});
</script>
</head>
<body>
<div id="tabbed_box_1" class="tabbed_box">
<h4>Browse Site <small>Select a Tab</small></h4>
<div class="tabbed_area">

<ul class="tabs">
<li><a href="#" title="content_1" class="tab active">Topics</a></li>
<li><a href="#" title="content_2" class="tab">Archives</a></li>
<li><a href="#" title="content_3" class="tab">Pages</a></li>
</ul>

<div id="content_1" class="content">
<ul>
<li><a href="">HTML Techniques <small>4 Posts</small></a></li>
<li><a href="">CSS Styling <small>32 Posts</small></a></li>
<li><a href="">Flash Tutorials <small>2 Posts</small></a></li>
<li><a href="">Web Miscellanea <small>19 Posts</small></a></li>
<li><a href="">Site News <small>6 Posts</small></a></li>
<li><a href="">Web Development <small>8 Posts</small></a></li>
</ul>
</div>
<div id="content_2" class="content">
<ul>
<li><a href="">December 2008 <small>6 Posts</small></a></li>
<li><a href="">November 2008 <small>4 Posts</small></a></li>
<li><a href="">October 2008 <small>22 Posts</small></a></li>
<li><a href="">September 2008 <small>12 Posts</small></a></li>
<li><a href="">August 2008 <small>3 Posts</small></a></li>
<li><a href="">July 2008 <small>1 Posts</small></a></li>
</ul>
</div>
<div id="content_3" class="content">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contribute</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>

</div>
</div>
</body>
</html>

已赞过 已踩过<

评论收起

阿辉LV6
2012-10-31 · TA获得超过263个赞

知道小有建树答主

回答量：705

采纳率：0%

帮助的人：406万

我也去答题访问个人页

关注

展开全部

<style>
#showDiv div {
    display: none;
}
</style>
 
<ul id="list">
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
<div id="showDiv">
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
</div>
 
<script language="javascript" src="http://www.manvii.com/js/j.js"></script>
<script language="javascript">
$('#list li').click(function(){
    $('#showDiv div').hide();

$(#showDiv div:eq('+$(this).index()+')').show();
});
</script>


本回答被提问者和网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

暴躁老哥在线开火
2012-10-31 · TA获得超过806个赞

知道小有建树答主

回答量：466

采纳率：0%

帮助的人：216万

我也去答题访问个人页

关注

展开全部

专业名词叫 tab选项卡
搜索吧，大把好用的。
例如这里
http://www.lanrentuku.com/js/biaoqian.html

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

求一个jquery或者原生javascript控制鼠标所点击的列表，对应一个当前div显示，其他div同时隐藏的案例

其他类似问题

为你推荐：