ここではネイティブ JavaScript を使用して、オブジェクト指向の方法で保守および使用が簡単なスライド メニューを作成します。呼び出しメソッドは次のとおりです。
var $sliding = document.getElementById("silding");
var s1 = new Sliding(); .commands = $sliding.getElementsByTagName(" dt");
s1.panels = $sliding.getElementsByTagName("dd") ;
s1.init("mouseover", "active");
デモ コード ポイント slide.js と slide.html の 2 つのファイルのコード
をコピーします。
JavaScript スライド コントロールのデモ<br><style type="text/css" > <br>/ *reset*/ <br>dl,ul,li,dt,dd{ margin:0; list-style:none; } <br>/*silding*/ <br>シルディング{幅:200ピクセル; ライン高さ:25ピクセル; オーバーフロー:非表示;} <br>.シルディングdt{ボーダーカラー:#bebebe; } <br>.silding dd{ 表示:none; 背景:#efefef; font-size:12px; } <br>.silding .active{ font-weight:bold;} <br> ; <br>< スクリプトタイプ="text/javascript"</script> <br><body> ="silding" class= "silding"> <br><dl><br><dt class="active"><br><dd style="display:block" ;" > <br><ul> <br><li><a href="#">最初のセカンダリ メニュー</a></li> <br><li> 1 つのセカンダリ メニューメニュー<br><li>
<br><br><dl> <br><dt>第 2 レベルのメニュー</dt> <br><ul> <br><li>第 2 レベルのメニュー</li>第 2 レベルのメニュー <br><li> <br></dl> dl> <br><dt><br><ul><br></li> ; 3 番目のセカンダリ メニュー <br> </dl>
</li>
<li> ; 3 番目のセカンダリ メニュー <br> <br> </div> <br><script type="text/javascript"> <br>var $sliding = document.getElementById("silding"); s1.commands = $sliding.getElementsByTagName("dt "); <br>s1.panels = $sliding.getElementsByTagName("dd") ; <br>s1.init("mouseover", "active"); ></script> <br></html> <br><br> <br>コードをコピーします<br><br><br> コードは次のとおりです:<br><div class="codebody" id="code5753"> <br>function Slider(i,panelHeight) { //dto <br>this.index = i; <br>this.panelHeight = パネルの高さ; <br>} <br>//class Sliding { <br>function Sliding(activeIndex) { <br>this.commands = []; <br>this.panels = []; <br>this.activeIndex = activeIndex || 0; <br>this.sliderCache = {}; <br>} <br>Sliding.prototype = { <br>//绑定イベント <br>init: function(eventName, activeCssClass) { <br>var _this = this; <br>var cmds = _this.commands; <br>_this.activeClass = activeCssClass; <br>for (var i = 0, n = cmds.length; i <br>cmds[i]["on"eventName] = function(e) { <br>_this.handel(これ、e); <br>} <br>cmds[i].index = i; <br>if (i == _this.activeIndex) { <br>_this.sliderCache = new Slider(i, _this.panels[i].offsetHeight); <br>} <br>} <br>}, <br>// イベント处理関数数 <br>handel: function(elem, args) { <br>var _this = this; <br>var インデックス = elem.index; <br>varcacheIndex = _this.sliderCache.index; <br>varcacheElem = _this.commands[cacheIndex]; <br>if (index ==cacheIndex) return; <br>var showPanel = _this.panels[index]; <br>var HidePanel = _this.panels[cacheIndex]; <br>var h = parseInt(_this.sliderCache.panelHeight); <br>showPanel.style.height = "0px"; <br>showPanel.style.display = "ブロック"; <br>_this.tween(hidePanel, showPanel, h); <br>elem.className = _this.activeClass; <br>cacheElem.className =cacheElem.className.replace(eval("/ ?" _this.activeClass " ?/"),""); <br>_this.sliderCache = 新しいスライダー(インデックス, h); <br>}, <br>//アニメーション画算法 <br>tween: function(obj0, obj1, h) { <br>_this = argument.callee; <br>var ステップ = 20; <br>if ("v" == "v") { <br>ステップ = 30; <br>} <br>if (h > 0) { <br>var h0 = obj0.offsetHeight; <br>var h1 = obj1.offsetHeight; <br>if (h < step) { <br>obj0.style.display = "none"; <br>obj0.style.height = (h1 h) "px"; <br>obj1.style.height = (h1 h) "px"; <br>} else { <br>h = h - ステップ; <br>obj0.style.height = (h0 - ステップ) "px"; <br>obj1.style.height = (h1 ステップ) "px"; <br>setTimeout(function() { <br>_this(obj0, obj1, h) <br>}, <br>50) <br>} <br>} <br>} <br>} <br>/ /} <br>
</div> <br> 上はすべて代償です、ここでは、プレゼンテーションのために HTML CSS を徹底的に定義し、さらに jquery の fn.slideUp fn.slideDown を使用して、より簡単に私が一つの作品を公開できるようにするためです。これらの独自の JS 対技術の向上も役立ちます。</li>
</div>
</div>
</div>
<div class="wzconShengming_sp">
<div class="bzsmdiv_sp">このウェブサイトの声明</div>
<div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- <div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>人気の記事</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/1796785841.html" title="アサシンのクリードシャドウズ：シーシェルリドルソリューション" class="phpgenera_Details_mainR4_bottom_title">アサシンのクリードシャドウズ：シーシェルリドルソリューション</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/1796789525.html" title="Windows11 KB5054979の新しいものと更新の問題を修正する方法" class="phpgenera_Details_mainR4_bottom_title">Windows11 KB5054979の新しいものと更新の問題を修正する方法</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2週間前</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/1796785857.html" title="Atomfallのクレーンコントロールキーカードを見つける場所" class="phpgenera_Details_mainR4_bottom_title">Atomfallのクレーンコントロールキーカードを見つける場所</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/1796783009.html" title="アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法" class="phpgenera_Details_mainR4_bottom_title">アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/1796784440.html" title="<🎜>：Dead Rails-すべての課題を完了する方法" class="phpgenera_Details_mainR4_bottom_title"><🎜>：Dead Rails-すべての課題を完了する方法</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By DDD</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ja/article.html">もっと見る</a>
</div>
</div>
</div> -->
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>ホットAIツール</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>リアルなヌード写真を作成する AI 搭載アプリ</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>写真から衣服を削除するオンライン AI ツール。</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>脱衣画像を無料で</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI衣類リムーバー</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ja/ai">もっと見る</a>
</div>
</div>
</div>
<script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>人気の記事</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/1796785841.html" title="アサシンのクリードシャドウズ：シーシェルリドルソリューション" class="phpgenera_Details_mainR4_bottom_title">アサシンのクリードシャドウズ：シーシェルリドルソリューション</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/1796789525.html" title="Windows11 KB5054979の新しいものと更新の問題を修正する方法" class="phpgenera_Details_mainR4_bottom_title">Windows11 KB5054979の新しいものと更新の問題を修正する方法</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2週間前</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/1796785857.html" title="Atomfallのクレーンコントロールキーカードを見つける場所" class="phpgenera_Details_mainR4_bottom_title">Atomfallのクレーンコントロールキーカードを見つける場所</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/1796783009.html" title="アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法" class="phpgenera_Details_mainR4_bottom_title">アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/1796784440.html" title="<🎜>：Dead Rails-すべての課題を完了する方法" class="phpgenera_Details_mainR4_bottom_title"><🎜>：Dead Rails-すべての課題を完了する方法</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By DDD</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ja/article.html">もっと見る</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>ホットツール</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="メモ帳++7.3.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_title">
<h3>メモ帳++7.3.1</h3>
</a>
<p>使いやすく無料のコードエディター</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ja/toolset/development-tools/93" title="SublimeText3 中国語版" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 中国語版" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ja/toolset/development-tools/93" title="SublimeText3 中国語版" class="phpmain_tab2_mids_title">
<h3>SublimeText3 中国語版</h3>
</a>
<p>中国語版、とても使いやすい</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ゼンドスタジオ 13.0.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_title">
<h3>ゼンドスタジオ 13.0.1</h3>
</a>
<p>強力な PHP 統合開発環境</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ドリームウィーバー CS6" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_title">
<h3>ドリームウィーバー CS6</h3>
</a>
<p>ビジュアル Web 開発ツール</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac版</h3>
</a>
<p>神レベルのコード編集ソフト（SublimeText3）</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ja/ai">もっと見る</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>ホットトピック</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/gmailyxdlrkzn" title="Gmailメールのログイン入り口はどこですか？" class="phpgenera_Details_mainR4_bottom_title">Gmailメールのログイン入り口はどこですか？</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>7633</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>15</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/cakephp-tutor" title="CakePHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">CakePHP チュートリアル</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1390</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>52</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/steamdzhmcssmgs" title="Steamのアカウント名の形式は何ですか" class="phpgenera_Details_mainR4_bottom_title">Steamのアカウント名の形式は何ですか</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>89</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>11</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/winactivationkeyper" title="Win11 Activation Key Permanent" class="phpgenera_Details_mainR4_bottom_title">Win11 Activation Key Permanent</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>71</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>19</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ja/faq/newyorktimesdailybrief" title="NYTの接続はヒントと回答です" class="phpgenera_Details_mainR4_bottom_title">NYTの接続はヒントと回答です</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>32</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>145</span>
</div>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ja/faq/zt">もっと見る</a>
</div>
</div>
</div>
</div>
</div>
<div class="Article_Details_main2">
<div class="phpgenera_Details_mainL4">
<div class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div class="phpgenera_Details_mainL4_info">
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ja/faq/594692.html" title="Windows 11: スタート レイアウトをインポートおよびエクスポートする簡単な方法" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/169267039189563.png?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Windows 11: スタート レイアウトをインポートおよびエクスポートする簡単な方法" />
</a>
<a href="https://www.php.cn/ja/faq/594692.html" title="Windows 11: スタート レイアウトをインポートおよびエクスポートする簡単な方法" class="phphistorical_Version2_mids_title">Windows 11: スタート レイアウトをインポートおよびエクスポートする簡単な方法</a>
<span class="Articlelist_txts_time">Aug 22, 2023 am 10:13 AM</span>
<p class="Articlelist_txts_p">Windows 11 では、スタート メニューが再設計され、スタート メニューにフォルダー、アプリ、アプリがあった以前のバージョンとは異なり、ページのグリッドに配置された簡略化されたアプリのセットが特徴です。 [スタート] メニューのレイアウトをカスタマイズし、他の Windows デバイスにインポートおよびエクスポートして、好みに合わせてカスタマイズできます。このガイドでは、スタート レイアウトをインポートして Windows 11 のデフォルト レイアウトをカスタマイズする手順について説明します。 Windows 11 の Import-StartLayout とは何ですか? Import Start Layout は、Windows 10 以前のバージョンでスタート メニューのカスタマイズをインポートするために使用されるコマンドレットです。</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ja/faq/576006.html" title="Windows 11の右クリックメニューで「その他のオプションを表示」をデフォルトにする方法" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/168896361563622.png?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Windows 11の右クリックメニューで「その他のオプションを表示」をデフォルトにする方法" />
</a>
<a href="https://www.php.cn/ja/faq/576006.html" title="Windows 11の右クリックメニューで「その他のオプションを表示」をデフォルトにする方法" class="phphistorical_Version2_mids_title">Windows 11の右クリックメニューで「その他のオプションを表示」をデフォルトにする方法</a>
<span class="Articlelist_txts_time">Jul 10, 2023 pm 12:33 PM</span>
<p class="Articlelist_txts_p">私たちユーザーが決して望んでいない最も迷惑な変更の 1 つは、右クリックのコンテキスト メニューに [その他のオプションを表示] が含まれていることです。ただし、これを削除して、Windows 11 のクラシック コンテキスト メニューに戻すことができます。複数回クリックしたり、コンテキスト メニューで ZIP ショートカットを探したりする必要はもうありません。 Windows 11 で本格的な右クリック コンテキスト メニューに戻るには、このガイドに従ってください。解決策 1 – CLSID を手動で調整する これは、リストにある唯一の手動方法です。この問題を解決するには、レジストリ エディターで特定のキーまたは値を調整します。注 – このようなレジストリの編集は非常に安全であり、問題なく機能します。したがって、システムでこれを試す前に、レジストリのバックアップを作成する必要があります。ステップ 1 – 試してみる</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ja/faq/515599.html" title="Windows 11の右クリックコンテキストメニューから「Windowsターミナルで開く」オプションを削除する方法" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/168138170581617.png?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Windows 11の右クリックコンテキストメニューから「Windowsターミナルで開く」オプションを削除する方法" />
</a>
<a href="https://www.php.cn/ja/faq/515599.html" title="Windows 11の右クリックコンテキストメニューから「Windowsターミナルで開く」オプションを削除する方法" class="phphistorical_Version2_mids_title">Windows 11の右クリックコンテキストメニューから「Windowsターミナルで開く」オプションを削除する方法</a>
<span class="Articlelist_txts_time">Apr 13, 2023 pm 06:28 PM</span>
<p class="Articlelist_txts_p">デフォルトでは、Windows 11 の右クリック コンテキスト メニューには [Windows ターミナルで開く] というオプションがあります。これは、ユーザーが特定の場所で Windows ターミナルを開くことができる非常に便利な機能です。たとえば、フォルダーを右クリックして [Windows ターミナルで開く] オプションを選択すると、Windows ターミナルが起動し、その特定の場所が現在の作業ディレクトリとして設定されます。これは素晴らしい機能ですが、誰もがこの機能を活用できるわけではありません。一部のユーザーは、右クリック コンテキスト メニューにこのオプションを入れたくないため、右クリック コンテキスト メニューを整理するために削除したいと考えている場合があります。</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ja/faq/632221.html" title="携帯電話の画面が滑りにくく、乾燥しにくい場合はどうすればよいですか?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202312/04/2023120415490210190.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="携帯電話の画面が滑りにくく、乾燥しにくい場合はどうすればよいですか?" />
</a>
<a href="https://www.php.cn/ja/faq/632221.html" title="携帯電話の画面が滑りにくく、乾燥しにくい場合はどうすればよいですか?" class="phphistorical_Version2_mids_title">携帯電話の画面が滑りにくく、乾燥しにくい場合はどうすればよいですか?</a>
<span class="Articlelist_txts_time">Dec 04, 2023 pm 03:51 PM</span>
<p class="Articlelist_txts_p">携帯電話の画面が滑りにくく乾燥しにくい場合の解決策: 1. 画面を加湿する; 2. 画面を定期的に清掃する; 3. 指の滑り強度を高める; 4. 携帯電話の画面保護フィルムを使用する; 5. 保護カバーを交換する; 5. 保護カバーを交換する6. 手を湿らせてください; 7. フィルムを貼るときは清潔に扱ってください; 8. 潤滑剤を使用してください; 9. 手袋を使用してください; 10. 画面の明るさを調整してください; 11. 携帯電話を交換してください。詳細な紹介: 1. スクリーンを加湿し、スクリーンの隣に加湿器を置くか、水をスプレーして空気中の湿度を上げ、スクリーンの乾燥を減らします; 2. スクリーンを定期的に掃除し、専門のスクリーンクリーナーなどを使用してください。</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ja/faq/619421.html" title="純粋な CSS を使用して影付きのメニュー ナビゲーション バーを実装する実装手順" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/169741605279691.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="純粋な CSS を使用して影付きのメニュー ナビゲーション バーを実装する実装手順" />
</a>
<a href="https://www.php.cn/ja/faq/619421.html" title="純粋な CSS を使用して影付きのメニュー ナビゲーション バーを実装する実装手順" class="phphistorical_Version2_mids_title">純粋な CSS を使用して影付きのメニュー ナビゲーション バーを実装する実装手順</a>
<span class="Articlelist_txts_time">Oct 16, 2023 am 08:27 AM</span>
<p class="Articlelist_txts_p">純粋な CSS を使用して影付きのメニュー ナビゲーション バーを実装する手順には、特定のコード サンプルが必要です。Web デザインでは、メニュー ナビゲーション バーは非常に一般的な要素です。メニュー ナビゲーション バーに影効果を追加すると、外観が向上するだけでなく、ユーザー エクスペリエンスも向上します。この記事では、純粋な CSS を使用して影付きのメニュー ナビゲーション バーを実装し、参考として具体的なコード例を示します。実装手順は次のとおりです。 HTML 構造の作成 まず、メニュー ナビゲーション バーを収容するための基本的な HTML 構造を作成する必要があります。による</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ja/faq/633728.html" title="iPhoneでメッセージを編集する方法" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/164/170288002993364.png?x-oss-process=image/resize,m_fill,h_207,w_330" alt="iPhoneでメッセージを編集する方法" />
</a>
<a href="https://www.php.cn/ja/faq/633728.html" title="iPhoneでメッセージを編集する方法" class="phphistorical_Version2_mids_title">iPhoneでメッセージを編集する方法</a>
<span class="Articlelist_txts_time">Dec 18, 2023 pm 02:13 PM</span>
<p class="Articlelist_txts_p">iPhone のネイティブ メッセージ アプリを使用すると、送信されたテキストを簡単に編集できます。このようにして、間違いや句読点を修正したり、テキストに適用された可能性のある間違った語句や単語を自動修正したりすることができます。この記事では、iPhone でメッセージを編集する方法を学びます。 iPhone でメッセージを編集する方法 必須: iOS16 以降を実行している iPhone。 iMessage テキストはメッセージ アプリでのみ編集でき、元のテキストを送信してから 15 分以内に限り編集できます。 iMessage 以外のテキストはサポートされていないため、取得または編集できません。 iPhone でメッセージ アプリを起動します。 [メッセージ] で、メッセージを編集する会話を選択します</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ja/faq/515750.html" title="Windows 11 で [その他のオプションを表示] メニューを無効にする方法" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/168138780718487.png?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Windows 11 で [その他のオプションを表示] メニューを無効にする方法" />
</a>
<a href="https://www.php.cn/ja/faq/515750.html" title="Windows 11 で [その他のオプションを表示] メニューを無効にする方法" class="phphistorical_Version2_mids_title">Windows 11 で [その他のオプションを表示] メニューを無効にする方法</a>
<span class="Articlelist_txts_time">Apr 13, 2023 pm 08:10 PM</span>
<p class="Articlelist_txts_p">新しく改良された Microsoft オペレーティング システムを体験する人が増えていますが、それでも昔ながらのデザインを好む人もいるようです。新しいコンテキスト メニューが Windows 11 に優れた一貫性をもたらしていることは疑いの余地がありません。 Windows 10 について考えてみると、各アプリケーションに独自のコンテキスト メニュー要素があるという事実が、一部の人にとって深刻な混乱を引き起こします。 Windows 11 の透明なタスクバーから丸い角に至るまで、このオペレーティング システムは傑作です。この問題では、世界中のユーザーが Windows 11 の「その他のオプションの表示」メニューをすばやく無効にする方法を知りたいと考えています。プロセスは非常に簡単なので、同じ状況にある場合は、必ず最後まで確認してください。</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ja/faq/620712.html" title="JavaScript を使用して画像の上下スライド切り替え効果を実現し、フェードインおよびフェードアウト アニメーションを追加するにはどうすればよいですか?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/169777199411818.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript を使用して画像の上下スライド切り替え効果を実現し、フェードインおよびフェードアウト アニメーションを追加するにはどうすればよいですか?" />
</a>
<a href="https://www.php.cn/ja/faq/620712.html" title="JavaScript を使用して画像の上下スライド切り替え効果を実現し、フェードインおよびフェードアウト アニメーションを追加するにはどうすればよいですか?" class="phphistorical_Version2_mids_title">JavaScript を使用して画像の上下スライド切り替え効果を実現し、フェードインおよびフェードアウト アニメーションを追加するにはどうすればよいですか?</a>
<span class="Articlelist_txts_time">Oct 20, 2023 am 11:19 AM</span>
<p class="Articlelist_txts_p">JavaScript はどのようにして画像の上下スライド切り替え効果を実現し、フェードインおよびフェードアウト アニメーションを追加できるのでしょうか? Web 開発では、画像の切り替え効果を実現することが必要になることがよくありますが、JavaScript を使用して上下のスライド切り替えを実現したり、フェードインおよびフェードアウトのアニメーション効果を追加したりすることができます。まず、複数の画像を含むコンテナが必要です。HTML の div タグを使用して画像をホストできます。たとえば、「image-container」という ID を持つ div を作成して、</p>
</div>
</div>
<a href="https://www.php.cn/ja/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div class="footer">
<div class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p>
</div>
<div class="footermid">
<a href="https://www.php.cn/ja/about/us.html">私たちについて</a>
<a href="https://www.php.cn/ja/about/disclaimer.html">免責事項</a>
<a href="https://www.php.cn/ja/update/article_0_1.html">Sitemap</a>
</div>
<div class="footerbottom">
<p>
© php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>
<script src="/static/js/common_new.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js?1745289608"></script>
<script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<script type='text/javascript' src='/static/js/viewer.min.js?1'></script>
<script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script>
<script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script>
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
var u = "https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u + 'matomo.php']);
_paq.push(['setSiteId', '9']);
var d = document,
g = d.createElement('script'),
s = d.getElementsByTagName('script')[0];
g.async = true;
g.src = u + 'matomo.js';
s.parentNode.insertBefore(g, s);
})();
</script>
<script>
// top
layui.use(function () {
var util = layui.util;
util.fixbar({
on: {
mouseenter: function (type) {
layer.tips(type, this, {
tips: 4,
fixed: true,
});
},
mouseleave: function (type) {
layer.closeAll("tips");
},
},
});
});
document.addEventListener("DOMContentLoaded", (event) => {
// 定义一个函数来处理滚动链接的点击事件
function setupScrollLink(scrollLinkId, targetElementId) {
const scrollLink = document.getElementById(scrollLinkId);
const targetElement = document.getElementById(targetElementId);
if (scrollLink && targetElement) {
scrollLink.addEventListener("click", (e) => {
e.preventDefault(); // 阻止默认链接行为
targetElement.scrollIntoView({
behavior: "smooth"
}); // 平滑滚动到目标元素
});
} else {
console.warn(
`Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.`
);
}
}
// 使用该函数设置多个滚动链接
setupScrollLink("Article_Details_main1L2s_1", "article_main_title1");
setupScrollLink("Article_Details_main1L2s_2", "article_main_title2");
setupScrollLink("Article_Details_main1L2s_3", "article_main_title3");
setupScrollLink("Article_Details_main1L2s_4", "article_main_title4");
setupScrollLink("Article_Details_main1L2s_5", "article_main_title5");
setupScrollLink("Article_Details_main1L2s_6", "article_main_title6");
// 可以继续添加更多的滚动链接设置
});
window.addEventListener("scroll", function () {
var fixedElement = document.getElementById("Article_Details_main1Lmain");
var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器
var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度
var scrollHeight = document.documentElement.scrollHeight; // 页面总高度
// 计算距离底部的距离
var distanceToBottom = scrollHeight - scrollTop - clientHeight;
// 当距离底部小于或等于300px时，取消固定定位
if (distanceToBottom <= 980) {
fixedElement.classList.remove("Article_Details_main1Lmain");
fixedElement.classList.add("Article_Details_main1Lmain_relative");
} else {
// 否则，保持固定定位
fixedElement.classList.remove("Article_Details_main1Lmain_relative");
fixedElement.classList.add("Article_Details_main1Lmain");
}
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const mainNav = document.querySelector('.Article_Details_main1Lmain');
const header = document.querySelector('header');
if (mainNav) {
window.addEventListener('scroll', function() {
const scrollPosition = window.scrollY;
if (scrollPosition > 84) {
mainNav.classList.add('fixed');
} else {
mainNav.classList.remove('fixed');
}
});
}
});
</script>
</body>
</html> 
