CODEWITHSUNDEEP
jquerycss
dimple
dimple

Reputation: 51

class not getting replaced

when i click on bye item then the div class=page_bye should change to div class=page_bye1 and div class=page_home1 's class should change to page_home same way when i click on home the div with class as page_home should change to page_home1 and page_bye should change to page_bye1. but the styles for the div is not switching .plz help

<body>
<aside>
    <div class=sidebar>       
                <ul class=nav>
                    <li class="home1">HOME</li>
                    <li class="bye">BYE</li> 
                </ul>
     </div>
</aside>

<article>

    <div class="page_home1">
        <div class="myhome">
            <h1>Home</h1>
            <p> this is the index page </p>
        </div>
    </div>

    <div class="page_bye">
        <div class="mybye">
            <h1>Goodbye</h1>
            <p> this is bye page </p>
        </div>
    </div>

</article>

  <script>

var regex = /1$/
$("ul.nav li").on('click', function(e) {
    var $this = $(this), clazz = $this.attr("class");
    var pageclazz="page_"+$this.attr('class');

    e.preventDefault();

    if(!regex.test(clazz)){
        $this.removeClass(clazz).addClass(clazz + 1);
        var pagedisplay = "page_"+$this.attr("class");

        $("article div").removeClass(pageclazz).addClass(pagedisplay);  

        $this.siblings('[class$="1"]').attr('class', function(idx, clazz){
            return clazz.substring(0, clazz.length - 1)
        });

       $("article div").siblings('[class$="1"]').attr('class', function(idx, pageclazz){
            return pageclazz.substring(0, pageclazz.length - 1)
        });
    }
});

</script>

 </body>

My css is 

body {
width:1020px;
margin:0 auto;
position:absolute;  
}

aside{
float:left;
display:block;
width:20%;
}

article {
float:right;
display:block;
margin-top:0;
width:75%;
}

.page_home{ 
    visibility:hidden;
}
.page_bye{  
    visibility:hidden;
}

.page_home1{    
    visibility:visible;
}
.page_bye1{ 
    visibility:visible;
}


.sidebar {
    margin-left:10px;
    }
.nav {
    display:block;
    margin-top:60px;        
}

ul {
    list-style-type:none;
    color:#000;
    }


li.home{ 
 background: #666 no-repeat;
 width:150px;
 height:65px;
 color:#000;

}


li.bye{ 
background:#666 no-repeat;
width:150px;
 height:65px; 
 color:#000; 

}


li.home:hover {
    background:#06F no-repeat;
width:150px;
 height:65px; 
 color:#000;

    }
li.bye:hover {
    background:#06F no-repeat;
width:150px;
 height:65px; 
 color:#000;;
    }

li.home1 {
    background:#06F no-repeat;
width:150px;
 height:65px; 
 color:#000;
    }
li.bye1 {
        background:#06F no-repeat;
width:150px;
 height:65px; 
 color:#000;
    }

Upvotes: 0

Views: 102

Answers (2)

Maria
Maria

Reputation: 548

You use IE, don't you? I've got

Line: 1513
Error: Access denied

in jquery source ~line 1513:

    // Support: IE>8  
    // If iframe document is assigned to "document" variable and if iframe has been reloaded,  
    // IE will throw "permission denied" error when accessing "document" variable, see jQuery #13936  
    if ( parent && parent.frameElement ) {  
        parent.attachEvent( "onbeforeunload", function() {  
            setDocument();  
        });  
    }

Solution: Open the result's iframe in new tab/window.
This bug may be related to http://bugs.jquery.com/ticket/13936

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55740

You can achieve the same functionality by reducing the number of classes being used.

And writing the same functionality in few lines of code.

The only thing that I have added is use HTML-5 data-* attributes to store the class that relates to the link.

I am just maintaining a single class and toggling that instead of replacing the existing class.

Also you have too many repeated styles in your CSS which are not required. I took the liberty and cleaned up a bit. Can still be worked on to make it more efficient.

HTML

<aside>
    <div class=sidebar>
        <ul class=nav>
            <li class="home active" data-class="page_home">HOME</li>
            <li class="bye" data-class="page_bye">BYE</li>
        </ul>
    </div>
</aside>
<article>
    <div class="page_home show">
        <div class="myhome">
             <h1>Home</h1>

            <p>this is the index page</p>
        </div>
    </div>
    <div class="page_bye">
        <div class="mybye">
             <h1>Goodbye</h1>

            <p>this is bye page</p>
        </div>
    </div>
</article>

CSS

body {
    width:1020px;
    margin:0 auto;
    position:absolute;
}
aside {
    float:left;
    display:block;
    width:20%;
}
article {
    float:right;
    display:block;
    margin-top:0;
    width:75%;
}
.page_home, .page_bye {
    visibility:hidden;
}
.show {
    visibility: visible;
}
.sidebar {
    margin-left:10px;
}
.nav {
    display:block;
    margin-top:60px;
}
ul {
    list-style-type:none;
    color:#000;
}
.nav > li {
    background: #666 no-repeat;
    width:150px;
    height:65px;
    color:#000;
}
.nav >li:hover {
    background:#06F no-repeat;
}
.nav > li.active {
    background:#06F no-repeat;
}

Javascript

$("ul.nav li").on('click', function (e) {
    var $this = $(this),
        // Class of the one to be shown
        clazz = $this.data("class");

    // Add the active class to the li
    // and remove it for their siblings
    $this.addClass('active').siblings().removeClass('active');

    // Remove the show class for all divs in articles
    $('article > div').removeClass('show');
    // Show only the div related to the class
    $('.' + clazz).addClass('show');

});

Check Fiddle

Upvotes: 2

Related Questions