As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened,
visit the help center提供指导。
已关闭8年。
我无法弄清楚这一点，感到非常沮丧和尴尬。客户希望在网站底部找到一个站点 map ，只需单击一下即可将用户带到任何页面和该页面中的任何选项卡。应该很容易做到，但是由于某种原因，我无法解决这个问题。在完全诚实的努力下，我是一名艺术家，只具有足够的代码知识来防范危险。我不能自己编写JQuery，但是在大多数情况下，我可以阅读已写的内容并了解正在发生的事情。
示例1- Contact.php拥有基本功能示例2-TabTest1.html我能够从stackoverflow的.com问题10616833 / link-to-anchor-inside-tabbed-content-from-external-link中获取信息，并使其起作用。那里的脚本实际上不起作用(对我而言)。花了我一天的时间，但我弄清楚了这是什么(括号，和往常一样)，并且您看到的是工作中的信息。不幸的是，它不只是插入我已经存在的代码中。我尝试了几种不同的方法，但是我不完全了解jsfiddle中发生的事情。 示例2- ContactRE.php这是我尝试使用上述问题中给出的代码的最佳尝试。我只是不知所措。您可以单击选项卡，查看其作用，但是单击任何选项卡后，它们都将按选中的状态点亮，但是内容完全不变。我怀疑它与“// return false;”有关。在“if”语句之前，因为取消注释使其可以再次工作，但是仍然无法从外部链接到单个选项卡。启用后，似乎ContactRE.php＃Social确实链接了，但是只有在键入它，按下Enter键，等待然后再单击刷新之后才链接。 示例4- index.php您可以看到它与示例1类似，只是在另一个页面上测试了链接。没用选项卡内容只是消失了。 对于示例1，示例2和示例4，您可以看到我试图自己解决这个问题，甚至没有访问站点 map 所在的“BottomInfo”类中的论坛。当我意识到我认为可以使用的系统时，我开始使用Links3，而Links1并不会削减它。我只是简单地使用了构成标签的链接，通过CSS删除了样式并列出了列表。适用于其各自的页面，但不用于外部链接。
我为喜欢它的人创建了一个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>
这是我的科学怪人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;
});
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"-->
我通读了以下内容，并尝试以各种方式实现，尽管没有一种有效。我什至尝试应用某些 Accordion 的思想结构，因为人们似乎对 Accordion 提出了相同的问题，但我不擅长将其应用于选项卡。
有关stackoverflow的相关问题
link-to-an-anchor-within-jquery-tabbed-content unable-to-call-specific-content-from-an-external-file-inside-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的主题/从外部标签到div的链接
很抱歉缺少链接，显然我只能发布2。
主要更新 10月19日(美国东部时间)
我还没有完全解决我的问题，但是现在我可以从网站外部链接到特定的URL(或输入它)，但是，如果我在页面上，则在单击页面中的链接时URL会更新。页面或手动输入，但是只有单击一次“刷新”后，它才会更改内容。
页面是
http://certus.worldpath.net/crazy.html通过在末尾添加“#Email”来直接链接至选项卡。
有什么想法吗？
我将不胜感激您可以提供的任何帮助。
一个使用jquery.tools作为选项卡的演示
据我了解你的问题，这应该符合你的问题:
Tab B-1 Tab B-3 您的原始问题代码的解决方案
如何从外部链接链接到选项卡式内容？ 解决了请取一个
look at the solution(
#During，
#After)
if (window.location.hash) {
var wndHash = window.location.hash;
var tab = wndHash + "Tab";
// if hash exist on doc ready then remove class "active" from all tabs
$("#tabs li").removeClass('active');
// show the tab content and make tab list item (li) active
$(wndHash).fadeIn();
$(tab).parent().addClass("active");
console.log(wndHash, $(wndHash), tab, $(tab));
} else {
// if no hash make the BeforeTab active
$("#Before").fadeIn();
$("#BeforeTab").parent().addClass("active");
}
使用CSS3选择器游览
根据
Naman Goel的建议(请参见本主题)，我设置了
basic css3 target selector demo:
<h2>Table of contents</h2>
<ul>
<li><a href="#intro">intro</a>
<li><a href="#end">the end</a>
</ul>
<h2><a name="intro">CSS3 selectors and the :target pseudo class</a></h2>
<h2><a name="end">Look at me - i am the END-Anchor</a></h2>
而这个CSS
h2 {font-size: 24px; font-weight: heavy; padding: 1em;}
*:target { color: red; font-size: 32px; }
如果网址包含相应的 anchor (#intro或#end)，它是更改h2标题的css的基本设置
如何使用内部( anchor 定)链接更改选项卡的内容？
在您的主要更新中，您写道:“如果我在页面上，则当我单击页面内的链接时，URL会更新，但它不会更改内容”
在
your page中，所有选项卡
(tab Email)正常工作并正在加载其相应的内容。因此，我假设您正在谈论的是页面crazy.html页脚中的链接:
<div class="BottomInfo" id="A234">
<div class="Links3">
<a href="Contact.php">Contact</a>
<ul id="Nottabs">
<li class="Lactive">foo</li>
<li><div class="LinkText" id="LinksTT2">
<a class="icon_accept" href="#Email">Email Us</a></div>
</li>
</ul><!---Ends ul id "Nottabs-->
</div>
</div>
如果单击此链接，则由于页脚中没有为链接附加事件处理程序，因此不会更新内容。
页脚没有链接的事件处理程序
使用
chrome devtools，您可以看到页脚中的链接没有附加任何事件处理程序。
。
在您的JavaScript中，为与此
selector $("#tabs li")匹配的每个DOM节点添加一个click事件。在页脚(
BottomInfo)中，列表项与选项卡中的选择器不匹配。因此，当您单击页脚中的链接时，没有任何反应。如果您为列表项
$("#Nottabs li").click(...添加一个事件处理程序，并在选项卡中放入相同的代码，则该代码应该可以使用。
$("#Nottabs li").click(function () {
// similar to your tab solution
// you have to attach a click-event handler
// to the list item in your BottomInfo
}
javascript和CSS 2的完全正常演示
请以您的代码为起点看
the fully working demo。
请告诉我这是否可以解决您的问题
小更新
我发现了
demo for tabs using css3。这是相当令人印象深刻的。