ID selector produces no selection

Question

This is probably very simple but don't get the right way to solve this issue, so please bear with me for this newbie question. I have this structure:

...
...
<script type="text/javascript" src="js/slideShow.js"></script>
<script type="text/javascript" src="js/jquery-1.6.js" ></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/content_switch.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/forms.js"></script>
<script type="text/javascript" src="js/bgStretch.js"></script>
<script type="text/javascript" src="js/jquery.color.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/cScroll.js"></script>
<script type="text/javascript" src="js/jcarousellite.js"></script>
<script src="js/googleMap.js" type="text/javascript"></script>
...
...
    <article id="content" name="content"><div class="ic"></div>
        <ul>

            <!-- about -->
            <li id="page_About" name="page_About">
            <div class="pad">
                <a href="#close" class="close"><span></span></a>
                <div class="wrapper">
                    <div class="col1">
                        <h2>Welcome</h2>
                        <div class="wrapper">
                            <figure class="left marg_right1"><img src="images/mission.jpg" alt=""></figure>
                            <p align="justify" class="pad_bot1"><a href="http://www.com.com/" target="_blank" class="link1"></p>
                            <p align="justify" class="pad_top1"></p>
                        </div>
                        <ul id="icons">
                        </ul>
                    </div>
                    <div class="col1 pad_left1">
                        <h2>What</h2>
                        <div class="relative">
                            <div class="scroll">
                                <p align="justify" class="pad_bot1"></p>
                                <ul class="list1 pad_bot1">
                                    <li><a href="#!/page_Services">some</a></li>
                                </ul>
                                <p align="justify" class="pad_bot1"></p>
                                <ul class="list1 pad_bot1">                                     
                                </ul>
                                <p align="justify" class="pad_bot1"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </li>
            <!-- about end -->

            <!-- services -->
            <li id="page_Services">
            <div class="pad">
                <a href="#close" class="close"><span></span></a>
                <div class="wrapper">
                    <h2>Our</h2>
                    <div class="relative">
                        <div class="scroll1">
                            <!--some-->
                            <figure class="left marg_right1"><img src="images/some.jpg" alt=""></figure>
                            <ul class="list1">
                                <li id="some">Some</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            </li>       
            <!-- services end -->
</ul>
        </article>

The problem comes with the id="some", I need to click on the "some" of page_About (ie. <a href="#!/page_Services">some</a>) and then go to the "Some" section (ie. id="some"). I tried directly #some but it occurs nothing. I am thinking it is because I have all these sections in one single HTML file.

Support on this is very welcomed, thanks in advance,

EDIT 1:

thanks for the replies and answers, I appreciate that. However, if I use #some nothing occurs, in fact, nothing also occurs if I use #!page_Services instead of #!/page_Services. So, / should be causing the problem? #!/some gives also nothing. Any idea why?

http://stackoverflow.com/questions/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for — adeneo, May 17 '15 at 14:40
thanks for the replies and answers, I appreciate that. However, if I use `#some` nothing occurs, in fact, nothing also occurs if I use `#!page_Services` instead of `#!/page_Services`. So, `/` should be causing the problem? `#!/some` gives also nothing. — Gery, May 17 '15 at 14:55

score 0 · Answer 1 · answered May 17 '15 at 14:45

The '#!/...' fragment is probably used by a function fired by the onhashchange event. This is used by some websites to prevent full page reloads when data is being loaded asynchronously instead.

You are correct that if you want to navigate to a tag with attribute:

id="some"

then you will need to set the href on your anchor tag to:

href="#some"

score 0 · Answer 2 · answered May 17 '15 at 14:47

0

For in-page links, you need to set the href of the link to a # followed by the id of the element you want to jump to.

In your example, <a href="#!/page_Services">some</a> should be <a href="#some">some</a>.

answered May 17 '15 at 14:47

Alex McMillan

17,096
12
55
88

ID selector produces no selection

2 Answers2