2017-02-28 225 views
-2

添加類導航欄L1標籤

<script type="text/javascript"> 
 
    $('#nav ul li').eq(0).addClass("active"); 
 
    }); 
 
</script>
#nav a:after { 
 
    -webkit-transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
 
    transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    position: absolute; 
 
    z-index: 1; 
 
    content: ""; 
 
    left: 50%; 
 
    right: 50%; 
 
    height: 3px; 
 
    bottom: 13px; 
 
    background-color: #24252f; 
 
}
<div id="nav"> 
 
    <ul > 
 
     <li ><a href="/index.html">HOME</a></li> 
 
     <li><a href="/products/index.html">PRODUCTS</a></li> 
 
     <li><a href="/about/index.html">ABOUT</a></li>   
 
     <li class="reservation"><a href="/partnerships/index.html">PARTNERSHIPS</a></li>     
 
    </ul> 
 
</div>

*這是我的代碼,在這裏我有導航欄,我必須主動力,當用戶去perticular頁面上。我的問題是我分開頭(導航欄),所以我怎麼可以添加或刪除活動類李*

+2

你能解釋*我分離了標題(導航欄)*? – Rajesh

+0

您必須檢測服務器端的當前活動選項卡(例如php),然後將'active_tab'變量傳遞給您的分隔導航html部分,並通過條件放置類 – Armen

+0

請提供更多詳細信息。單獨使用片段會使您的問題不清楚 –

回答

2

試試這個: 這將增加「主動」類所點擊的元素。 您可以在活動課程中提供任何想要的樣式。 您可以檢查

HTML爲清晰起見,DOM:

<div id="nav"> 
     <ul > 
     <li><a href="#">HOME</a></li> 
     <li><a href="#">PRODUCTS</a></li> 
     <li><a href="#">ABOUT</a></li> 
     <li><a href="#">PARTNERSHIPS</a></li>   
    </ul> 
</div> 

腳本:

$('#nav').on('click','ul > li',function(){ 
$('li').removeClass('active'); 
$(this).closest('li').addClass('active'); 
}) 

CSS

.active { 
// Add styles 
} 

Codepen

+0

感謝您的回覆,它不是在我的代碼 –

+0

非常感謝你 –

-1

你可以嘗試把.active當你在一個特定的頁面,就像如果你在家裏頁:

<li><a href="/index.html" class="active">HOME</a></li> 
<li><a href="/products/index.html">PRODUCTS</a></li> 
<li><a href="/about/index.html">ABOUT</a></li> 
<li class="reservation"><a href="/partnerships/index.html">PARTNERSHIPS</a></li> 

然後,如果你的產品是:

<li><a href="/index.html">HOME</a></li> 
<li><a href="/products/index.html" class="active">PRODUCTS</a></li> 
<li><a href="/about/index.html">ABOUT</a></li> 
<li class="reservation"><a href="/partnerships/index.html">PARTNERSHIPS</a></li> 
+0

你是什麼意思? 'tab'還用於在單個網站中定義多個部分。 –

+0

他沒有提及使用'tabs',所以我根據他提供的內容回答。 – Swellar

+0

@Downvoter你能評論一下原因嗎?所以我可以提高答案 – Swellar

0

你最好添加一個名爲活躍之外,以與標籤種類也寫一些CSS來。主動類和利用它取決於你需要h大約分別爲頁面。

+0

@Rajesh我認爲這就是爲什麼他們來自臨時(假)帳戶 –

+0

@SagarV令人驚訝的是還沒有人做到了。我猜每個人都在考慮這樣一個事實,即用戶沒有足夠的代表並且很容易。 – Rajesh

+1

@Blah Blah,請更新您的答案,以便證明術語**答案**。 – Rajesh

0

考慮您將包括index.html中爲每一個菜單和index.html你的資產淨值的div是單獨爲每個菜單,你可以做到以下幾點:

1)給IDS您的每李立

<li id="li1"><a href="/index.html">HOME</a></li> 
    <li id="li2"><a href="/products/index.html">PRODUCTS</a></li> 
    <li id="li3"><a href="/about/index.html">ABOUT</a></li> 

2),並在每個index.html的添加如下腳本

<script type="text/javascript"> 
    $('respective li id').addClass("active"); 

    //for other lis remove active class using 
    //following code : $('li id').removeClass("active"); 
</script> 
+0

這裏分別是什麼?我寫這樣

+0

對應的li id表示,對於index.html上的腳本,產品使用$('#li2')。addClass(「active」);等其他索引頁 –