javascript - 请求前端大师指点 -PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - 请求前端大师指点

大家讲道理 2017-04-10 18:11:23

[JavaScript讨论组]

281

这样的效果怎么做的

参考网站 http://www.fytest.com/

大家讲道理

光阴似箭催人老，日月如移越少年。

全部回复(7)

PHP中文网2017-04-10 18:13:23 7楼

选项卡效果

赞 +0

添加回复

阿神2017-04-10 18:13:23 6楼

直接上代码
<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>

$(function(){
   var bb=$(".aa li");
   bb.click(function(){
    $(this).addClass("red")/*给当前元素添加样式*/
    .siblings().removeClass("red");/*给当前元素的同类移除样式*/
    var index=bb.index(this);/*获取点击的是ul中第几个li*/
    alert(index)
    $(".yy li")/*选取要显示区域的子节点*/
    .eq(index).show()/*显示菜单对应的子元素*/
    .siblings().hide();/*隐藏没有选中的子元素siblings是选取同级别元素的意思*/
});

});
</script>

<style>
    li{list-style:none; float:left;cursor:pointer; }

.tab{width: 250px;background-color: red}
.none{display: none;}
.red{background-color: red;}

</style>

</head>
<body>
<p class="tab">

<p  class="aa">
    <ul >
        <li class="red">
        第一个
        </li>
           <li >第2个</li>
              <li>第3个</li>
                 <li>第4个</li>
    </ul>
</p>
    <p>
    <ul  class="yy">
        <li class="">
        1sdfasdf个
        </li>
           <li class="none">是2打发斯蒂芬</li>
              <li class="none">阿斯蒂芬3</li>
                 <li class="none">水电费4</li>
    </ul>
</p>
</p>

</body>
</html>

赞 +0

添加回复

伊谢尔伦2017-04-10 18:13:23 5楼

要么用插件Jquery UI 要么自己写纯生js
像这种mouseover直接改变css样式就好了。

赞 +0

添加回复

PHPz2017-04-10 18:13:23 4楼

这就是个选项卡的效果，其实呢这里面的内容都全部加载在这个页面了，只不过是默认显示一个其他的都隐藏掉了，然后呢，绑定事件来控制相应的显示跟隐藏。其实你可以自己定一个类名，比如 .hd{display:none};通过添加跟移除这个类名来控制所选内容的显示跟隐藏。

赞 +0

添加回复

黄舟2017-04-10 18:13:23 3楼

除了楼上的用法，用css3新特性也是很好的，比如target之类的

赞 +0

添加回复

伊谢尔伦2017-04-10 18:13:23 2楼

https://jqueryui.com/ jquery ui - tab

赞 +0

添加回复

PHPz2017-04-10 18:13:23 1楼

http://gaoqiang19514.github.io/demoPage/

结构进页面去看，js代码就这些OK

// tab
(function(){

var controlList = $('.control-list-item');
var contentList = $('.content-list-item');

controlList.click(function(event) {
    var index = $(this).index();

    $(this).addClass('active').siblings().removeClass('active');

    contentList.eq(index).slideDown('slow').siblings().slideUp('fast');
});

})();

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>