CODEWITHSUNDEEP
javascriptjqueryhtml
Lady Ivory
Lady Ivory

Reputation: 47

How to insert External html code to Div with jquery

Here is my Html code,index.html

<body>
    <div id="container">
        <div id="header">

            <div class="menu_div">
                <ul id="menu-bar">
                    <div id="menu_div">
                        <li><a href="#" id="#home">Home</a></li>
                        <li><a href="#" id="#men">Men</a></li>
                        <li><a href="#" id="#women">Women</a></li>
                        <li><a href="#" id="#cosmetics">Cosmetics</a></li>
                        <li><a href="#" id="#accessories">Accessories</a></li>
                        <li><a href="#" id="#services">Services</a></li>
                        <li><a href="#" id="#aboutus">About Us</a></li>
                    </div>
                </ul>
            </div>

        </div>
        <div id="control">
            <p style="position:relative;">Lorem Ipsum...</p>
        </div>
    </div>  

</body>

Here is my Jquery code,to change external div

  <script type="text/javascript">
        $(document).ready(function(){
            $('#aboutus').click(function () {           
                $('#control').load('AboutUs.html #controlAboutUs') ;
            }); 
        });
    </script>

and Here is my External Html.AboutUs.html

<html>
<head>
    <title>About us</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div id="controlAboutUs">
        <div>
            <h3>Welcome From Ivory's Collection</h3>
            <p>
                We export Clothes,Accessories and Branded cosmetics from Japan Directly. We are fully guranteed for quality and designs.We export Clothes,Accessories and Branded cosmetics from Japan Directly. We are fully guranteed for quality and designs.We export Clothes,Accessories and Branded cosmetics from Japan Directly. We are fully guranteed for quality and designs.We export Clothes,Accessories and Branded cosmetics from Japan Directly. We are fully guranteed for quality and designs.We export Clothes,Accessories and Branded cosmetics from Japan Directly. We are fully guranteed for quality and designs.We export Clothes,Accessories and Branded cosmetics from Japan Directly. We are fully guranteed for quality and designs.
            </p>
        </div>
    </div>
</body>
</html>

I tried with simple code for that, it worked. But in this files, it is not working. I don't know why... pls help me

Upvotes: 3

Views: 253

Answers (1)

Diomedes Andreou
Diomedes Andreou

Reputation: 385

Oh buddy, don't use hash when declaring an id on your html code.

e.g.

 <li><a href="#" id="aboutus">About Us</a></li>

That should do it.

Upvotes: 5

Related Questions