Question

当我点击再见项时，div class = page_bye应该更改为div class = page_bye1和div class = page_home1的类应该更改为page_home当我点击home作为page_home的div应该更改为page_home1和page_bye应更改为page_bye1。但div的样式不是切换.plz帮助

<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>

我的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{ 
    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;
    }

Answer 1

您可以通过减少使用的类数来实现相同的功能。

在几行代码中编写相同的功能。

我添加的唯一内容是使用 HTML-5数据 - * 属性来存储与链接相关的类。

我只是维护一个类并切换它而不是替换现有的类。

你的CSS中有太多重复的样式，这些都不是必需的。我冒昧地清理了一下。仍然可以使其更有效率。

<强> 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

Answer 2

你使用IE浏览器，不是吗？我有

行：1513
错误：访问被拒绝

在jquery源码〜第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();  
        });  
    }

解决方案：在新标签/窗口中打开结果的iframe 此错误可能与http://bugs.jquery.com/ticket/13936

有关

上课没有被取代

2 个答案: