更新时间:2023-10-28 22:45:10
As far as i understood your question this should match your problem:
Please take a 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");
}
Based on Naman Goel suggestion (see in this thread) i have set up a 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>
And this css
h2 {font-size: 24px; font-weight: heavy; padding: 1em;}
*:target { color: red; font-size: 32px; }
Are the basic setup to change the css of the h2 heading if the url contains the corresponding anchor (either #intro or #end)
In your major update you write: "If I am on the page the URL updates when I click on the link within the page but it does not change the content"
In your page all tabs (tab Email) are working fine and are loading their corresponding content. So i assume that you are talking about the links in the footer of the page 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>
If you click on this link the content is not updated since you do not have an event handler attached for the links in the footer.
With chrome devtools you can see that there are no event handlers attached to the links in the footer.
.
In your javascript you add a click event for every DOM Node that matches this selector $("#tabs li")
. In your footer (BottomInfo
) the list item does not match the same selector like the one in your tabs. Therefore nothing happens when you click on the links in the footer. If you add an event handler for the list items $("#Nottabs li").click(...
and put the same code as in your tabs it should work.
$("#Nottabs li").click(function () {
// similar to your tab solution
// you have to attach a click-event handler
// to the list item in your BottomInfo
}
Please take a look at the fully working demo with your code as a starting point.
Please let me know if this solves your problem
I found a demo for tabs using css3. This is quite impressive.