在html中使用Anchors的最佳做法是什麼？

-2

我在網頁開發方面有點起步，我想知道在HTML設計中使用錨點的最佳做法是什麼。我目前正在設計和列出可以點擊列表項（li）的地方，然後使用jQuery執行特定功能。我也使用一些圖像作爲可點擊的按鈕，但是，我想知道是否最好使用錨點。在html中使用Anchors的最佳做法是什麼？

來源

2016-07-25 kjHajem

什麼是這些錨在講什麼？ – madalinivascu

你是否偶然在談論使用''標籤來表示不是真正的鏈接，而是JavaScript驅動的行爲？ –

錨鏈是他所指的......我不認爲需要澄清。 '錨'是一個非常有名的術語，不是嗎？ – Lee

如果你想從一個頁面重定向到另一個，你應該使用錨標記。但是，如果你想添加事件，所以它的全部取決於標記。

通常情況下，您可以編寫內聯js或css代碼，這不是一個好的做法。雖然您可以使用css或id並將您的個性化代碼寫入單獨的JS文件中。

例如： -

<ul id="primary-nav"> 
    <li> Home </li> 
    <li> About </li> 
</ul>

頁上添加的jQuery後，你可以寫下來，所需的代碼： -

(function(){ 
    $("#primary-nav").on("click", function(){ 
    // Your Code; 
    }) 
})

的最佳做法的一些例子是下： -

HTML樣板文件

<!DOCTYPE html> 
<html class="no-js" lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible"/> 
    <title>Your Page Title</title> 
    <meta name="description" content="goes here..."/> 
    <meta name="keywords" content="keyword 1, keyword 2"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
    <meta name="robots"/> 

    <link rel="stylesheet" href="your-single-deployment-stylesheet.css"> 
    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"> 
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"> 
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png"> 
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png"> 
    <!-- JS Links should sit on the bottom of the page! --> 
</head> 
<body> 
... content 
<script src="yourJavascript.js"></script> 
</body> 
</html>

CSS

的代碼壞話與更好的名稱

.is-scrollable { 
    overflow: auto; 
} 
.column-body { 
    background: #000; 
}

示例代碼

.s-scr { 
    overflow: auto; 
} 
.cb { 
    background: #000; 
}

示例例與壞話與更好的名稱

.text-highlight { float: right; color: red; }

的代碼

.right-red { float: right; color: red; }

示例代碼的JavaScript

//avoid repeating var in variable declaration 
var foo; 
var bar; 
var lorem; 
var ipsum; 

//comma seperated variable declarations 
var foo, 
    bar, 
    lorem, 
    ipsum;

避免定義在多個步驟

var foo = {}; 

foo.prop = 'bar'; 

foo.method = function() {}; 

//defined in a single assignment 
var foo = { 
    prop: 'bar',  
    method: function() {} 
}

爲了避免污染全局命名空間，請使用以下代碼片段在GitHub上

(function(window, undefined) { 
    var foo = 1; //private variable 

})(window);

結帳我的其他職位學習最佳實踐，即www.github.com/ananddeepsingh

來源

2016-07-25 09:01:02

很好的答案，謝謝。 – kjHajem

試試這是非常簡單的，即。 javascript的'onclick'事件。這可以在DOM的任何元素上使用它。

如：

<div onclick="alert('Hey this is working')">Click me</div>

來源

2016-07-25 08:42:13

在html中使用Anchors的最佳做法是什麼？

回答

相關問題