关于HTML 同页面鼠标经过不同标题切换不同内容,我想用Jquery代码实现,会的高手提供代码,谢谢
例如标题010203当鼠标经过01的时候出来属于01的内容.当鼠标经过02的时候出来属于02的内容。当鼠标经过03的时候出来属于03的内容.在同页面不跳转的情况下实现。0...
例如 标题01 02 03 当鼠标经过01的时候出来属于01的内容.
当鼠标经过02的时候出来属于02的内容。
当鼠标经过03的时候出来属于03的内容.
在同页面 不跳转的情况下 实现。
01,02,03的标题和内容是在一个框架里的 展开
当鼠标经过02的时候出来属于02的内容。
当鼠标经过03的时候出来属于03的内容.
在同页面 不跳转的情况下 实现。
01,02,03的标题和内容是在一个框架里的 展开
2个回答
展开全部
我可以做一个给你
(北京八方永信教育)
(北京八方永信教育)
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
你可以吧三个标题放一个div里面,三个内容放一个大div里面,代码如下:
<div class="main">
<div class="title">
<a href="#">标题01</a>
<a href="#">标题02</a>
<a href="#">标题03</a>
</div>
<div class="content">
<div>标题01的内容</div>
<div>标题01的内容</div>
<div>标题01的内容</div>
</div>
</div>
$(document).ready(function(){
var titles = $("div.title >a");
var conts = $("div.content >div");
titles.first().addClass("now").siblings().removeClass("now"); //默认第一个标题添加样式
conts.first().show().nextAll().hide(); //默认第一个内容显示,其他隐藏
titles.each(function( index ){
$(this).mouseover(function(){
$(this).addClass("now").siblings().removeClass("now"); //给鼠标悬浮上的第index个(即当前)标题添加样式
conts.eq(index).show().siblings().hide(); //第index个内容显示,其他隐藏
});
});
});
如果你的内容里面还有div的话,你可以给他的外层div添加一个属性,比如class="aa"为了标示,么有实际意义
比如:
<div class="content">
<div class="aa"><div>asdsa</div>标题01的内容</div>
<div class="aa">标题01的内容</div>
<div class="aa">标题01的内容</div>
</div>
那你取得内容是: conts = $("div.content >div.aa");
其他的代码都不用变,
希望对你有所帮助!
<div class="main">
<div class="title">
<a href="#">标题01</a>
<a href="#">标题02</a>
<a href="#">标题03</a>
</div>
<div class="content">
<div>标题01的内容</div>
<div>标题01的内容</div>
<div>标题01的内容</div>
</div>
</div>
$(document).ready(function(){
var titles = $("div.title >a");
var conts = $("div.content >div");
titles.first().addClass("now").siblings().removeClass("now"); //默认第一个标题添加样式
conts.first().show().nextAll().hide(); //默认第一个内容显示,其他隐藏
titles.each(function( index ){
$(this).mouseover(function(){
$(this).addClass("now").siblings().removeClass("now"); //给鼠标悬浮上的第index个(即当前)标题添加样式
conts.eq(index).show().siblings().hide(); //第index个内容显示,其他隐藏
});
});
});
如果你的内容里面还有div的话,你可以给他的外层div添加一个属性,比如class="aa"为了标示,么有实际意义
比如:
<div class="content">
<div class="aa"><div>asdsa</div>标题01的内容</div>
<div class="aa">标题01的内容</div>
<div class="aa">标题01的内容</div>
</div>
那你取得内容是: conts = $("div.content >div.aa");
其他的代码都不用变,
希望对你有所帮助!
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询