私はウェブ開発のスターターであり、HTMLデザインでアンカーを使用することに関してベストプラクティスが何か疑問に思っていました。私は現在、リストアイテム（li）をクリックしてjQueryを使用して特定の機能を実行できるように設計しています。また、クリック可能なボタンとしていくつかの画像を使用していますが、アンカーを使用する方がよいかどうか疑問に思っていました。アンカーをhtmlで使用するためのベストプラクティスは何ですか？
あなたはにしたい場合は、アンカータグを使用する必要があります別ののページへリダイレクトします。ただし、イベントを追加する場合は、そのすべてがマークアップに依存します。
通常、インラインjsまたはcssコードを書くことができますが、これは良い方法ではありません。あなたはCSSやIDを使用して、個別のJSファイルであなたのパーソナライズされたコードを書くことができますが。例えば
： - ：ベストプラクティスのいくつかの例は、下のよう
(function(){
$("#primary-nav").on("click", function(){
// Your Code;
})
})
です： - -
<ul id="primary-nav">
<li> Home </li>
<li> About </li>
</ul>
ページにjqueryのを追加した後、あなたは、必要なコードを書き留めることができます
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>
.s-scr {
overflow: auto;
}
.cb {
background: #000;
}
より良い名前
.is-scrollable {
overflow: auto;
}
.column-body {
background: #000;
}
例とコードの例とコードの
CSS
例コードの悪い名前
.right-red {
float: right;
color: red;
}
でより良い名前
.text-highlight {
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() {}
}
(function(window, undefined) {
var foo = 1; //private variable
})(window);
チェックアウト私の他の記事をスニペット使用し、グローバルな名前空間を汚染しないようにするにあなたはについて話これらのアンカーが何であるか
すばらしい答え、ありがとう。 – kjHajem
これはとても簡単です。 javascriptの 'onclick'イベント。これはDOMのどの要素でも使用できます。
例：
<div onclick="alert('Hey this is working')">Click me</div>
www.github.com/ananddeepsingh？ – madalinivascu
実際のリンクではなくJavaScript主導のアクションである要素に ''タグを使用することについて偶然話していますか？ –
アンカーリンクは彼が言及しているものです...私はそれを明確にする必要はないと思います。 「アンカー」はかなりよく知られている用語ですね。 – Lee