使用附加導航 affix 實現內容切換

2022-08-26 02:24:07 字數 1927 閱讀 3793

doctype html

>

<

html

>

<

head

>

<

title

> new document

title

>

<

meta

charset

="utf-8"

>

<

style

>

a ul

.affix

.affix .active a

.container

.container .box

.container .box.active

style

>

head

>

<

body

>

<

h1>練習:查詢元素&操作元素

h1>

<

h3>使用附加導航(affix)實現內容切換

h3>

<

div

class

="affix"

>

<

ul>

<

li><

a data-toggle

="item"

href

="#my-order"

>我的訂單

a>

li>

<

li class

="active"

><

a data-toggle

="item"

href

="#user-setting"

>使用者設定

a>

li>

<

li><

a data-toggle

="item"

href

="#account-security"

>賬戶安全

a>

li>

ul>

div>

<

div

class

="container"

>

<

div

id="my-order"

class

="box"

style

="background:#fee"

>我的訂單的詳細內容

div>

<

div

id="user-setting"

class

="box active"

style

="background:#efe"

>使用者設定的詳細內容

div>

<

div

id="account-security"

class

="box"

style

="background:#eef"

>賬戶安全的詳細內容

div>

div>

<

script

src="js/jquery-1.11.3.js"

>

script

>

<

script

>

//讓所有data-toggle為item的元素都能響應單擊事件$("

div.affix>ul

").on(

"click",

"[data-toggle='item']",

function

(e) });

script

>

body

>

html

>

使用More like this實現基於內容的推薦

基於內容的推薦通常是給定一篇文件資訊,然後給使用者推薦與該文件相識的文件。lucene的api中有實現查詢文章相似度的介面,叫morelikethis。elasticsearch封裝了該介面,通過elasticsearch的more like this查詢介面,我們可以非常方便的實現基於內容的推薦。...

使用JS實現導航切換時高亮顯示

index.html 內容 1.html 內容 效果圖 注意 1 location.href 用於獲取當前頁面的url 2 當前頁面應該儲存為index.html 3 indexof 用於檢索當前url中是否存在a中對應的href 4 每個html中都擁有相同的導航結構 5 eq index ind...

使用CSS實現內容展開功能

先看看 html部分 div class introduce input type checkbox id introduce p 影片講述了職業殺手亞瑟為解救愛人不得不完成一系列不可能的暗殺任務。在一樁看似意外的事件中,亞瑟 畢索 傑森 斯坦森 飾 的紅顏知己梅 楊紫瓊 飾 請求亞瑟解救屢遭毒打的...