0

当我单击再见项目时， div class=page_bye 应更改为 div class=page_bye1 和 div class=page_home1 的类应更改为 page_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;
    }
4

2 回答 2

2

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

并用几行代码编写相同的功能。

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

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

此外，您的 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');

});

检查小提琴

于 2013-08-04T21:11:40.713 回答
0

你用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有关

于 2013-08-04T21:23:18.250 回答