私がこれを理解できないことにひどくイライラして恥ずかしい思いをしました。クライアントは、ワンクリックでユーザーをそのページ内の任意のページと任意のタブに移動させるWebサイトの下部にあるサイトマップを望んでいます。簡単なはずですが、どういうわけか頭を包むことができません。完全に正直に言うと、私は芸術家であり、危険を冒すのに十分なコード知識を持っています。私は自分でJQueryを書くことはできませんが、すでに書かれていることを読み通して、ほとんどの場合、何が起こっているのかを理解することができます。
例1-Contact.phpは基本的な機能を備えています
例2-TabTest1.htmlstackoverflowの.comの質問10616833/link-to-anchor-inside-tabbed-content-from-an-external-linkから情報を取得して、機能させることができました。そこにあるスクリプトは実際には機能しません（私にとって）。1日かかりましたが、それが何であるか（いつものように括弧）、そしてあなたが見るものはその情報が機能していることを理解しました。残念ながら、それは私の既存のコードにプラグインするだけではありません。私はいくつかの異なる方法を試しましたが、jsfiddleで何が起こっているのか完全には理解していません。
例2-ContactRE.phpこれは、上記の質問で指定されたコードを使用するための最善の試みです。圧倒されます。タブをクリックしてその動作を確認できますが、いずれかのタブをクリックすると、選択したとおりにすべて点灯しますが、内容はまったく変わりません。「//falseを返す」と関係があるのではないかと疑っています。「if」ステートメントの前。コメントを外すとすべてが再び機能しますが、外部から個々のタブにリンクすることはできません。オンの場合、ContactRE.php＃Socialはリンクしているように見えますが、入力してEnterキーを押し、待機してから更新を押した後でのみです。
例4-index.php例1に似ていることがわかりますが、リンクをテストするための別のページです。動作しません。タブの内容が消えるだけです。
例1、2、4の両方で、サイトマップが配置される「BottomInfo」クラスのフォーラムにアクセスする前に、自分でこれを理解しようとしたことがわかります。Links3は、Links2とLinks1で機能すると思っていたシステムが機能することに気付いたときに、私が始めたものです。タブを構成するリンクを取得し、CSSでスタイルを削除して、リストを作成しました。それぞれのページで機能しますが、外部にリンクすることはできません。
JSFiddleを好む人のために、私はJSFiddleを作成しました。私は「ねえ、これを追加して突然魔法をかけろ！」を理解するのはあまり得意ではありません。優れた説明が付いていない限り、コードのスニペットが続きます。多分いつか、まだです。http://jsfiddle.net/ANCannan/CfGHp/
以下は私の作業中のJSですが、URLでハッシュを使用して外部のタブにリンクすることはできません
<script type= "text/javascript">
$(document).ready(function(){
// When user clicks on tab, this code will be executed
$("#tabs li").click(function() {
// First remove class "active" from currently active tab
$("#tabs li").removeClass('active');
// Now add class "active" to the selected/clicked tab
$(this).addClass("active");
// Hide all tab content
$(".tab_content").hide();
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(selected_tab).fadeIn();
// At the end, we add return false so that the click on the link is not executed
return false;
});});
</script>
これは、URLのハッシュによってタブをリンク可能にするための私のFrankensteinJSの試みです。
<script type= "text/javascript">
$(document).ready(function(){
// When user clicks on tab, this code will be executed
$("#tabs li").click(function() {
// First remove class "active" from currently active tab
$("#tabs li").removeClass('active');
// Now add class "active" to the selected/clicked tab
$(this).addClass("active");
// Hide all tab content
$(".tab_content").hide();
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(selected_tab).fadeIn();
// At the end, we add return false so that the click on the link is not executed
return false;
});
if (window.location.hash !== '') {
var $targetAnchor = $(document.location.hash);
// Grab the ID of the .tab-content that the hash is referring to
tabId = $targetAnchor.closest('.tab_content').attr('id');
// Find the anchor element to "click", and click it
$("#tabs li").find('a[href=#' + tabId + ']').click();
$('html, body').animate({
scrollTop: $targetAnchor.offset().top
});
}
$('a').not('.tabs li a').on('click', function(evt) {
evt.preventDefault();
var whereTo = $(this).attr('goto');
$tabs = $("ul.tabs li");
$tabs.find('a[href=#' + whereTo + ']').trigger('click');
alert(attr('name'));
alert( $('#'+whereTo+' a').offset().top );
$('html, body').animate({
scrollTop: $('#'+whereTo+' a').offset().top
});
});
$(function() {
$('a.refresh').live("click", function() {
location.reload();
});
});});
</script>
これは私の省略されたHTMLです
<div class= "Centered" id="TextContent">
<div id="tabs_container">
<ul id="tabs">
<li>
<div class= "Centered" id="TextContent2">
<div id="tabs_container2">
<ul id="tabs2">
<li class="active">
<div class= "LinkText" id="TT1"> <a class="icon_accept" href="#Before">Before</a></div>
</li>
<li>
<div class= "LinkText" id="TT2"> <a class="icon_accept" href="#During">During</a></div>
</li>
<li>
<div class= "LinkText" id="TT3"> <a class="icon_accept" href="#After">After</a></div>
</li>
</ul><!---Ends ul id "tabs" container2-->
</div><!---Ends "tabs_container2"-->
</div><!---Ends "Centered Text Content2"-->
</li>
</ul><!---Ends ul id "tabs-->
</div><!---Ends "tabs-container"-->
<div id="tabs_content_container">
<div id="Before" class="tab_content" style="display: block;">
<img src="Images/before.png" class="alignLeft" alt="CMC and QA Icons"><p>Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.</p>
<p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.</p><p>Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.</p>
<p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.</p>
</div><!---Ends Before container-->
<div id="During" class="tab_content" style="display: block;">
<p>In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.</p>
<p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.</p>
<p>Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.</p>
<p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.
</div><!---Ends "During"-->
<div id="After" class="tab_content">
<img src="Images/after.png" class="alignRight" alt="CMC and QA Icons">
<p> <p>Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.</p>
<p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.</p>
<p>Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.</p>
<p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.</p>
</div><!---Ends "After"-->
私は以下を読み、さまざまな方法で実装しようとしましたが、どれも機能しませんでした。人々がアコーディオンについて同じ質問をしているように見えるので、私はアコーディオンの思考構造のいくつかを適用しようとさえしましたが、私はそれをタブに適用するのが苦手です。
スタックオーバーフローに関する質問
- link-to-an-anchor-within-jquery-tabbed-content
- jquery内の外部ファイルから特定のコンテンツを呼び出すことができません
- use-one-jquery-code-for-all-tabs
- how-to-link-directly-to-jquery-accordion-tab
- link-to-open-jquery-accordion
- jquery-tabs-link-to-another-tab-from-inside
JQueryのトピック/link-to-tab-from-outside-tabs-div
リンクがないので申し訳ありませんが、どうやら私は2つしか投稿できません。
メジャーアップデート10月19日午後1時ETまだ問題は完全には解決していませんが、ウェブサイトの外部から特定のURLにリンク（または入力）できるようになりました。ただし、ページを表示している場合は、URLが更新されます。ページ内のリンクをクリックするか、手動で入力しますが、[更新]をクリックするまでコンテンツは変更されません。このページはhttp://certus.worldpath.net/crazy.html です。最後に「#Email」を追加して、タブに直接リンクします。考え？
私はあなたが私に与えることができるどんな助けにも大いに感謝します。
。