html左侧导航栏右侧显示内容
生活随笔
收集整理的這篇文章主要介紹了
html左侧导航栏右侧显示内容
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果圖
代碼
復制下來直接運行就可以
<!doctype html> <html lang = "en"><head><meta charset = "UTF-8"><meta name = "viewport"content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv = "X-UA-Compatible" content = "ie=edge"><title>Test</title><script src = "jquery-3.6.0.js"></script><style>/*兼容瀏覽器*/* {margin: 0;padding: 0;}.content {width: 100%;height: 100%;}.content-left {width: 19%;height: 600px;background-color: #1c232f;float: left;}.content-right {width: 81%;height: 600px;background-color: #6495ED;float: left;}.left-title {width: 100%;height: 50px;}.left-title > a {display: block;width: 100%;height: 50px;line-height: 50px;text-align: center;color: white;/*去掉a下默認下劃線*/text-decoration: none;}/*分割線*/.seg {height: 1px;width: 100%;background-color: black;}.nav {/*上下5,左右0*/margin: 5px 0;}/*菜單項主標題*/.nav-title {height: 40px;width: 100%;color: white;text-align: center;line-height: 40px;cursor: pointer;}/*子標題內容區*/.nav-content {width: 100%;height: 100%;background-color: #0C1119;}/*子標題的樣式*/.nav-content > a {display: block;width: 100%;height: 30px;color: #CCCCCC;text-decoration: none;text-align: center;line-height: 30px;font-size: 13px;}/*子標題鼠標經過時的改變顏色*/.nav-content > a:hover {color: #FFFFFF;background-color: #12040c;}/*內容區*/.content-right{font-size: 50px;line-height: 600px;text-align: center;}</style><script src = "https://code.jquery.com/jquery-3.2.1.min.js"integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"crossorigin = "anonymous"></script><script>$(function () {//隱藏所有子標題$(".nav-menu").each(function () {$(this).children(".nav-content").hide();});//給菜單項中的所有主標題綁定事件$(".nav-title").each(function () {//獲取點擊當前標簽下所有子標簽var navConEle = $(this).parents(".nav-menu").children(".nav-content");//綁定點擊事件,判斷navConEle的display這個屬性是否為none,時none的話時隱藏狀態$(this).click(function(){if (navConEle.css("display") != "none") {//隱藏,傳參數自帶動畫,單位為毫秒navConEle.hide(300);} else {//顯示,傳參數自帶動畫,單位為毫秒$(".nav-menu").each(function () {$(this).children(".nav-content").hide(300);});navConEle.show(300);}});});$(".nav-content>a").each(function () {$(this).click(function () {$(".content-right").html($(this).html());});});});</script></head><body><div class = "content"><!--左側導航欄--><div class = "content-left"><div class = "left-title"><a href = "#">xx后臺</a></div><!--水平線--><div class = "seg"></div><!--菜單欄導航--><div class = "nav"><!--每一個菜單欄項--><div class = "nav-menu"><!--主標題--><div class = "nav-title">商品管理</div><!--子標題--><div class = "nav-content"><a href = "#">商品列表</a><a href = "#">添加商品</a></div></div><!--每一個菜單欄項--><div class = "nav-menu"><!--主標題--><div class = "nav-title">訂單管理</div><!--子標題--><div class = "nav-content"><a href = "#">訂單查看</a><a href = "#">訂單排序</a></div></div><!--每一個菜單欄項--><div class = "nav-menu"><!--主標題--><div class = "nav-title">類目管理</div><!--子標題--><div class = "nav-content"><a href = "#">類目查看</a><a href = "#">類目刪除</a></div></div></div><!--水平線--><div class = "seg"></div></div><!--右側內容區--><div class = "content-right"><h1>內容區</h1></div></div></body> </html>總結
以上是生活随笔為你收集整理的html左侧导航栏右侧显示内容的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： react+redux+webpack+
- 下一篇： 瑞星杀毒软件、奇虎360杀毒软件、360