移動選擇乳頭上的鏈接選擇DIV ID單擊

我一個網站，功能相同的頁面上的許多鏈接的工作：移動選擇乳頭上的鏈接選擇DIV ID單擊

http://www.alexanderlozada.com

爲了讓用戶知道他們正在觀看什麼項目，我想要實現指向當前選定項目的小三角形。

例如：

enter image description here

我怎麼能去這樣做，而不使每一個鏈接一個單獨的頁面？我的工作與 - 鏈接的

樣品（我要保持當前的href和rel）

<a class="grey show_hide" href="#" rel="#projects" > 
PROJECTS 
</a>

來源

2013-07-21 Alexander Lozada

我們可以看到一些代碼嗎？ –

大聲笑！..其他人讀這個問題，因爲單詞「乳頭」？：D – Anil

在大多數情況下，這是通過使用僞元素做:before和/或:after像這樣（read full article）

CSS：

/* creates triangle */ 
.selected:after { 
    content:""; 
    display:block; /* reduce the damage in FF3.0 */ 
    position:absolute; 
    bottom:-2px; 
    left:50%; 
    width:0; 
    margin-left:-10px; 
    border-width:0px 15px 15px; 
    border-style:solid; 
    border-color:white transparent; 
} 


div.links { 
    display: inline-block; 
    position:relative; // you must have this to position the triangle propery 
    width: 25%; 
    height: 45px; // adjust height to fit the menu 
    float: left; 
    text-align: center; 
    font-size: 24px; 
    padding-top: 10px; 
}

的jQuery：

$(function(){ 
    $('.show_hide').click(function(){ 
     $('div.links').removeClass('selected'); // remove all other 'selected' links 
     $(this).parent().addClass('selected'); // sets the current .links to be selected 
    }); 
});

來源

2013-07-21 18:59:36

這肯定會創建一個三角形，但它究竟會如何移動點擊不同鏈接？ –

@AlexanderLozada簡單易用，創建一個'.selected'類並添加三角形的css，然後當您單擊一個元素時，使用'$（this）.addClass（'selected'）;'（don' t忘記從所有其他鏈接中'.removeClass（'selected'）'） –

對不起，但你能澄清一下嗎？你的意思是把css中的.triangle-isoceles類改爲.selected，然後調用它當我點擊一個鏈接時，在JavaScript中創建？如果我已經在點擊鏈接時正在執行javascript，我該如何去做呢？（將鏈接html編輯爲原始文章）。 –

添加活動類的：

<a class="btn active">menu link</a>

CSS：

.btn.active { background:url(cursor-active.png) bottom center no-repeat; }

js：

$('.btn').click(function(){ 
     $('.btn').removeClass('active'); 
     $(this).addClass('active'); 
    });

你可以在這裏看到：FIDDLE

來源

2013-07-21 18:59:08 pirs

我遵循你的指示，也用正確的路徑創建了我自己的圖像 - 雖然沒有出現。這裏是我的代碼：

PROJECTS

和CSS .btn.active { 背景：網址（IMG /資源/ nipple.png）底部中心不重複; } –

即使如此，這是最好的和更輕的解決方案，你可以做.. – pirs

它看起來像一個更輕的解決方案，但它似乎並沒有爲我工作。我很抱歉，如果我犯了一個愚蠢的錯誤，但我把JavaScript放在正確的位置？我只是用

11. 用向上/向下箭頭選擇div

12. 選擇選項上的空表單擊

13. AngularJS鏈接選擇

14. div的選擇性css（鏈接標籤）

15. jQuery：點擊選擇上一個/最近的div與選擇器

16. 移動選擇菜單保持當前的URL選擇選項

17. jQuery鏈接選擇

18. 選擇除ID以外的DIV中的所有鏈接。

19. 使用鏈接和asmselect選擇選擇表單選項

20. 將多個選擇框選項鍊接到單個選擇

21. Android選擇鏈接

22. 選擇與點擊鏈接的rel屬性具有相同ID的div

23. 單選按鈕選擇標籤鏈接點擊

24. jquery移動單選按鈕選擇

25. 選擇性div隱藏ID

26. tinymce選擇器只div ID

27. 上點擊單元格，選擇/取消選擇複選框

28. 移箭頭選擇在Emacs

29. 選擇鏈接裏面div標記

30. 單擊並將值從值選擇器移動到跨度中選擇的值

移動選擇乳頭上的鏈接選擇DIV ID單擊

回答

相關問題