If URL contains hashtag, then do this

[JasonBeee]

If you go to thisiswhyimbroke.com and click any of the tabs, you'll see that an anchor/hash tag is added to each button. #a1,#a2, etc.

I want to use a script where if the URL contains #a1, then it echos certain HTML/PHP.

I was trying to use PHP for this but for some reason it can't detect anchors...

Any help is appreciated!

[Old Pedant]

Not for "some reason". On purpose.

That hash isn't sent to the server-side code.

If you need the capability of a hash both server and client side, then hack it.

somesite.com/somepage.php?hash=a1

And then have the PHP code echo back

echo 'window.onload = function(){ location.hash="' . $_GET["hash"] . '"; };';

[JasonBeee]

I actually got javascript to verify if there was a hashtag in the URL with this code:

<script type="text/javascript">
            $(document).ready(function () {
                if(window.location.href.indexOf("#a2") >= 0) 
                {
                  //output specific HTML
                }
});
        </script>

My only problem is I'm not sure how to outprint the HTML code I want there. I tried using a predefined PHP var, but to no success. Can anyone help me insert HTML with proper syntax? Here's the HTML for reference:

<ul class="tabset">
	<li class="active" id="tab1"><a href="#tab-1" class="tab">Random</a></li>
	<li id="tab2"><a href="#tab-2" class="tab">Price High</a></li>
	<li id="tab3"><a href="#tab-3" class="tab">Price Low</a></li>
	<li id="tab4"><a href="#tab-5" class="tab">Food &amp; Drink</a></li>
	<li id="tab5"><a href="#tab-6" class="tab">Home &amp; Office</a></li>
	<li id="tab6"><a href="#tab-8" class="tab">Gadgets</a></li>
	<li id="tab7"><a href="#tab-7" class="tab">Geek</a></li>
	<li id="tab8"><a href="#tab-4" class="tab">Latest</a></li>
	<li id="tab9"><a href="#tab-9" class="tab">All</a></li>

</ul>

[Old Pedant]

So what do you want to do?

Sounds like you want to click on the <li id="tab2"> ???

[JasonBeee]

I just want to insert this HTML:

<ul class="tabset">
	<li class="active" id="tab1"><a href="#tab-1" class="tab">Random</a></li>
	<li id="tab2"><a href="#tab-2" class="tab">Price High</a></li>
	<li id="tab3"><a href="#tab-3" class="tab">Price Low</a></li>
	<li id="tab4"><a href="#tab-5" class="tab">Food &amp; Drink</a></li>
	<li id="tab5"><a href="#tab-6" class="tab">Home &amp; Office</a></li>
	<li id="tab6"><a href="#tab-8" class="tab">Gadgets</a></li>
	<li id="tab7"><a href="#tab-7" class="tab">Geek</a></li>
	<li id="tab8"><a href="#tab-4" class="tab">Latest</a></li>
	<li id="tab9"><a href="#tab-9" class="tab">All</a></li>

</ul>

Where the comment is in that previous javascript " // Output HTML here "

I just don't know how to properly format everything.

[Old Pedant]

I am utterly lost.

Why would you want to use JavaScript to write that? If that code needs to be on the page EVERY TIME the page appears, why would you not just drop it into the HTML? Why is JavaScript involved?

[rnd me]

when you build a single-page app, all the content of all the tabs is stored on the same page, so the hash changes don't load anything from php, so there's nothing to insert upon click either.

typically, a click on a tab link hides all open tabs, and shows the tab named in the link. in order for the tab setup to be bookmarked and history'd, use a simple onload event to find location.hash, and .click() the appropriate tab link to show the tab content specified by the url. you can also likely just raise the onhashchange() event, and let the normal handlers display the correct content.

you can also use the :target css pseudo-selector to match hashes with tab content, so that folks w/o js can still navigate the page and open/close tabs as expected (ex: div:target {display:block;})

@old penant: you want to do this so you don't have to use ajax and/or so interaction widgets are bookmark-able.

[Old Pedant]

you want to do this so you don't have to use ajax and/or so interaction widgets are bookmark-able

Do what? Create the HTML via JavaScript? Or use the tags in this way. I understand using the tags. I see no reason to create the HTML via JavaScript.

Not to mention that it's not search-engine friendly.